Rounded Corners Circle with Border-Radius CSS3

Rounded Corners Circle with Border-Radius CSS3Sometimes you need to create rounded corners box or any circle border, now you can do it easily using CSS3. Imagine what you can create, but they still only work with Mozilla, and if you need the better look in Internet Explorer, they just explain it in a single bit of line. Here they are:

Rounded Corners Circle with Border-Radius CSS3

#rounded {
-moz-border-radius: 25px;
border-radius: 25px;
}

The css3 code above will create rounded corners use the -moz- prefix which works with Firefox, Safari/Chrome, Opera and IE9. But Mozilla implementation also behaves slightly differently with the specification when percentages are supplied, so you can use the W3C specification. You can read more on the Mozilla Developer Center here.

W3C Specification:
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Mozilla Implementation:
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Topics: border, circle, corners, CSS, CSS3, design, radius, rounded, style, web, website


Leave a Reply

© 2011 e-WWW. All rights reserved.
Proudly designed by Andhie.