Skip to main content

Posts

Showing posts from June, 2011

Border-radius: rounded corners in CSS3

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/bott