Rounded div corners with Ruby on Rails

By | April 26
3 Comments

So now you know how to do nicely rounded div corners without using images or any javascript after reading this post.

But how do we integrate this nicely into our rails app? The following solution might not be perfect but that’s what i’m using and like:

put the css file from Deathshadow
in your public/stylesheets dir.

in your erb view, include the css with:

ruby
< view plain text >
  1. <%= stylesheet_link_tag "screen_borderstyles" %>

then add the following helper methods to the entire application:

ruby
< view plain text >
  1. # in application_helper.rb we add:
  2.  
  3. def rounded_div(options = {}, &block)
  4.     start, ending = rounded_div_html_code(options)
  5.     concat(start, block.binding)
  6.     block.call
  7.     concat(ending, block.binding)
  8. end
  9.  
  10. def rounded_div_rb(options = {}, &block)
  11.   start, ending = rounded_div_html_code(options)
  12.   start + block.call + ending
  13. end
  14.  
  15. def rounded_div_html_code(options = {})
  16.     id_attrib = options[:id] ? " id="#{options[:id]}"" : ""
  17.     class_attrib = options[:class] ? " #{options[:class]}" : ""
  18.     border = options[:border] ? "_border" : ""
  19.  
  20.     return %!
  21.       <div class="rounded#{border}#{class_attrib}"#{id_attrib}>
  22.         <b class="top"><b><b><b></b></b></b></b>
  23.           <div class="rounded_content">
  24.             !,
  25.     %!
  26.           </div>
  27.         <b class="bottom"><b><b><b></b></b></b></b>
  28.       </div>
  29.       !
  30.   end

to let this work we still need to definde the proper css classes as explained on the rounded corners web page:

css
< view plain text >
  1. # in your_stylesheet.css:
  2.  
  3. .my_rounded_div .top,
  4. .my_rounded_div .top b,
  5. .my_rounded_div .bottom,
  6. .my_rounded_div .bottom b,
  7. .my_rounded_div .rounded_content {
  8.     background-color: #ffffff;
  9.     border-color: green;
  10. }

now in any of your views you can do fun stuff like:

ruby
< view plain text >
  1. <% rounded_div(:class => "my_rounded_div") do %>
  2.   This is the content of my rounded div. Arbitrary view code goes here.
  3. <% end %>

or with a nice border around the div:

ruby
< view plain text >
  1. <% rounded_div(:class => "my_rounded_div", :border => true) do %>
  2.   This is the content of my rounded div with a border. Arbitrary view code goes here.
  3. <% end %>

but also inside your view helpers you can generate rounded divs with pure ruby:

ruby
< view plain text >
  1. def display_category_helper(category)
  2.   rounded_div_rb(:class => "main-cat") do
  3.     link_to(h(category.name), category_path(category))
  4.   end
  5. end

3 comments on “Rounded div corners with Ruby on Rails”

  1. This looks like a pretty clean rails solution on top of Deathshadow’s rounded div solution. I’m looking forward to trying it.

  2. This actually works very well. Having a few issues where my borders don’t show up on the sides of my rounded divs though. Have you encountered that at all?

  3. No, i didn’t encouter that … might be some browser problem?