Rounded corners have become very popular and could be very easy to implement using CSS3. However as we know, some widely used browsers won’t give support to CSS3, making our life more complicated and our code more ugly.

Luckily, there are ways to get around for browser limitations! There are numerous CSS-only techniques that vary in complexity and flexibility. In addition to the numerous javascript techniques that are usually easier to implement. This is my favorite one:

The “jQuery Corner Plugin” (jquery.malsup.com/corner/) will add divs to the element with a solid color background to hide the original corners and create the illusion of rounded corners. What I really like about the “jQuery Corner Plugin” is that it detects if your browser gives support to CSS3 and will use the appropriate CSS if possible.

Here’s how to implement it:

  1. If you are not using Drupal, add the jQuery library to your site.
  2. Add the plugin file to your site header.
  3. Create a separate javascript file that will call the plugin on the elements you want. It will look something like this:

$(document).ready(function() { $('#pagebody').corner("top 10px"); /* adds a 10px radius corner to the top of the page container */ $('h2').corner("5px"); /* adds a 5px radius corner to every h2 element */ });

Now, here is an interesting question! What if you wanted to use the rounded corners on every form submitted BUT not in a specific case, like on your search "form submit?"

Well, then you’ll have to use the “not” operator. Here’s an example:

$('.form-submit').not($('#search-form .form-submit’)).corner("5px");

Every element with the “form-submit” class that is NOT inside a div with a “search-form” id will get rounded corners.

Very simple isn’t it?

Whats your favorite technique to create rounded corners? Share with us!

Have a happy theming!

Read Next

Using Hook Views Query Alter

03 September, 2010|3 min
Get in touch and let’s get started.

We are a full service digital consultancy with experience and capacity to meet the needs of even the largest most complex of organizations in the world. Our services portfolio enables us to offer clients the best of experiences when working with our teams so as to make sure we keep the focus on their needs, customers and delivering tangible value to the business. End to end services; endless ideas. 

Three easy ways to get in touch. Complete the form to request a consultation, email us your inquiry, specs and/or RFP to contact@appnovation.com OR call one of our many, global office locations and tell us how we can help.