Creating rounded corners with CSS and without images Simple and appropriate: border-radius



border-radius
is a property

CSS3

property , still in the draft state but fully usable in production in modern browsers. It allows you to round one or more corners of an element in a very intuitive way by indicating the value of the desired rounding.

At the time this tutorial is written, only Gecko (Mozilla Firefox) and Webkit (Safari, Chrome) based browsers recognize the border-radius property. In practice, the property must be prefixed by -moz- on Gecko or -webkit- on Webkit to work on these browsers.

So border-radius becomes -moz-border-radius and -webkit-border-radius.
For the sake of clarity, the article does not use these prefixes. The constructed examples naturally use these prefixes to work.

                             #frame { 
border-radius: 10px;
}
Rounded corners in CSS3 © Alsacreations

It is possible to define the rounding of each of the corners, using a shortened script that reads as usual clockwise starting from the top (top, right, bottom, left).

So the following rule will create a rounded block of 5px top left, 10px top right, 0px bottom right and 5px bottom left:

                             #frame { 
border-radius: 5px 10px 0 5px;
}#frame {
border-radius: 5px 10px 0 5px;
}

coins arrondis en css3
Rounded corners in CSS3 © Alsacreations

Note: the shortened writing of -webkit-border-radius: 10px 10px 0 0; does not work on Chrome, it will be necessary to write each property completely, i.e. -webkit-border-top-left-radius: 10px; and -webkit-border-top-right-radius: 10px; to obtain a rounding on the top corners.

It is quite possible to make non-circular curves by specifying the degree of horizontal and vertical rounding.


Leave a Comment