HTML and CSS Reference
In-Depth Information
Rounded Corners
Whenever you put a box around an element using border properties, by default the box gets sharp corners.
You can turn a box with sharp corners into a box with rounded corners using the
border-radius
property.
With
border-radius
, you can specify the radius of a circle whose circumference governs the rounding of
the corners. The following CSS rule shows how to use the
border-radius
property:
.boxRoundedCorners {
padding:15px;
background-color:#d0bdbd;
border: 2px solid #071394;
border-radius: 25px 25px 25px 25px;
}
border-radius
sets the radius of the circles for the rectangle's four corners in the order top-left, top-
right, bottom-right, and bottom-left. Although this example sets the radius of every circle to 25px, that's
not necessary. You can specify that a radius value be different, and the corresponding corner (top-left, top-
right, bottom-right, or bottom-left) will change its curve accordingly.
You can also use an ellipse to control the curve rather than a circle. This way, the horizontal curve and
vertical curve can be different. To do this, you need to set the border radius of the individual corners as
follows:
.boxRoundedCorners2 {
padding:15px;
background-color:#d0bdbd;
border: 2px solid #071394;
border-top-left-radius: 25px 15px;
border-top-right-radius: 25px 15px;
border-bottom-left-radius: 50px 40px;
border-bottom-right-radius: 50px 40px;
}
This time, individual properties—
border-top-left-radius
,
border-top-right-radius
,
border-bottom-
left-radius
, and
border-bottom-right-radius
—specify the horizontal and vertical radius of the ellipse,
respectively. Figure 13-11 shows two ASP.NET
FormView
server controls placed inside
<div>
elements that
have the
boxRoundedCorners
and
boxRoundedCorners2
CSS classes applied.