HTML and CSS Reference
In-Depth Information
With CSS3, you can now apply new border styles, such as border-radius and
box-shadow .
The border-radius property allows you to create rounded corners on elements.
Prior to having the ability to do this, in order to make flexible elements with
rounded corners, you would either use several images to simulate rounded
corners, or use a JavaScript helper, such as Curvy Corners, which would
generate lots of div elements and position them to simulate a rounded corner.
border-radius allows you to generate rounded corners using CSS3 without any
additional help from images or JavaScript. It is now part of the CSS3 spec, and
using the following CSS can create a rounded border.
.box {
border-radius: 10px;
This will create a border with a radius of 10 pixels. You can also specify the
radius for each corner of your element using the following syntax, the result of
which you can see in Figure 5-14.
.box {
border: 1px solid #000000;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
width: 100px;
height: 100px;
Search WWH ::

Custom Search