The css3 property border-radius allows to create rounded corners to the elements.
Its value is specified in measure of units or percent.
Right now, the border-radius is compatible with Safari3+ and Firefox using the css3 correspondent: -webkit-border-radius and -moz-border-radius.
Example of css rule:
border: 5px solid red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
I am an element with a red border and rounded corners
NB: in the above example I am using the value ’solid’ for the css property border, the other values such as dotted, double, inset…(View the test page…)
2 values can be applied to the property border-radius: the first one for the horizontal radius, the second one for the vertical radius.
Example of css rule:
border: 5px solid red;
-moz-border-radius: 25px 10px;
-webkit-border-radius: 25px 10px;
I am an element with a red border and different rounded corners radius
NB: Firefox do not follow the specific applying the first value to the top-left/bottom-right corner and the second value to the top-left/bottom-right corner.
If we are using a background color without a border, the element’s background will itself have rounded corner.
Example of css rules:
background-color: #CCCCCC;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
I am an element with a gray background and rounded corners
The property border-radius can be applied to one specific corner:
- border-top-right-radius for the top right corner
- border-bottom-right-radius for the bottom right corner
- border-top-left-radius for the top left corner
- border-bottom-left-radius for the bottom left corner
NB: the css3 equivalent for Firefox are: -moz-border-radius-topright, -moz-border-radius-topleft, -moz-border-radius-bottomleft e
-moz-border-radius-bottomright. For Safari, simply add -webkit in front.
Example of css rule:
border: 5px solid red;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;
I am an element with a bottom left rounded corner
{ 4 trackbacks }
{ 4 comments… read them below or add one }
Sir,
The above example are supporting in firefox.But the above example not working in internet explorer. how do slove it this problem .reply for me,
Thanks,
Gurunathan.k
Hello,
the property border-radius is not supported by Internet Explorer.
If you want rounded corner compatible with all browsers, in css you could use images. Otherwise via javascript (such as NiftyCube).
Nice summary.
I have compiled a table at http://muddledramblings.com/table-of-css3-border-radius-compliance that you might find useful. One thing to note is that Mozilla’s interpretation of
-moz-border-radius: 25px 10px;seems to be the correct one after all. Development builds of WebKit follow Mozilla’s example, so Safari will agree sooner or later.After reading the spec about ten times I managed to figure out what they meant. The spec, alas, is not well-written on that point.
Opera will be supporting
border-radiuseventually; IE will take longer. As usual.Very interesting…Probably still use images, but good to know anyways.