Rounded div corners with Ruby on Rails

By | April 26, 2008

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:

  1. <%= stylesheet_link_tag "screen_borderstyles" %>

then add the following helper methods to the entire application:

  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:

  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:

  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:

  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:

  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. Antoine on said:

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

  2. Antoine on said:

    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. fabian on said:

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

Leave a Reply

*

* Copy This Password *

* Type Or Paste Password Here *

135,313 Spam Comments Blocked so far by Spam Free Wordpress