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 {
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
.boxRoundedCorners2 {
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.
Search WWH ::

Custom Search