Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

Rounded Corners


 / Published in: CSS
 

When CSS3 is fully supported across browsers rounded corners will be as simple as:

which will set a 5px radius on all 4 corners. For now we need some browser specific CSS combined with a little JavaScript to make this work in all browsers. In Safari, Chrome, and other webkit browsers we use -webkit-border-radius and in Firefox and other Mozilla based browsers we use -moz-border-radius.

Webkit and Mozilla use different syntax when specifying one corner.

For non Webkit and Mozilla browsers a little jQuery pluginwill mimic the border-radius property.

The jQuery corner plugin allows for more than setting the radius of the corner. You can also set the corner to show as a number of other patterns.

  1. 1 .element
  2. 2 {
  3. 3 border-radius: 5px;
  4. 4 }
  5.  
  6. 1 .element {
  7. 2 border-radius: 5px
  8. 3 -webkit-border-radius: 5px
  9. 4 -moz-border-radius: 5px
  10. 5 }
  11.  
  12. 1 .element {
  13. 2 border-top-left-radius: 5px
  14. 3 -webkit-border-top-left-radius: 5px
  15. 4 -moz-border-radius-top-left
  16. 5 }
  17.  
  18. 1 $(".element").corner("5px");

Report this snippet  

You need to login to post a comment.