HTML and CSS Reference
In-Depth Information
Borders
With CSS3, you can now apply new border styles, such as
border-radius
and
box-shadow
.
border-radius
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;
}
