advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.