HTML and CSS Reference
In-Depth Information
Rounding Individual Corners
The individual properties take one or two lengths or percentages, which are used to calculate the curve applied to
the corner. Percentages are relative to both the element's width and height.
•
A single length creates an evenly rounded curve.
•
A single percentage creates an evenly rounded curve only if the element is a square.
Otherwise, the browser calculates the percentage values of the width and height, and
treats them as two values.
•
With two values, the first sets the horizontal radius of a quarter ellipse and the second sets
the vertical radius.
0
, the corner is square.
•
If any value is
In the following example, each corner is set using a different method.
#box1 {
background-color: #006;
width: 200px;
height: 150px;
border-top-left-radius: 25px;
border-top-right-radius: 30%;
border-bottom-left-radius: 50% 30%;
border-bottom-right-radius: 100px 45px;
}
The top-left corner is shaped using a single length, which produces an evenly rounded curve. The top-right
corner uses a single percentage, but the element isn't square. So, the browser calculates
30%
of the width (
60px
)
and
30%
of the height (
45px
). The resulting values are used as the horizontal and vertical radii of a quarter ellipse.
The bottom two corners create identical curves using percentages and lengths. Figure
9-7
shows the result.
Figure 9-7.
Examples of setting different corner curves
Percentages remain proportional to the element. Lengths produce a consistently sized curve.
Using border-radius Shorthand
he
border-radius
shorthand property sets all four corners in a single declaration. Using it can be either
fiendishly complex or blissfully simple. Let's start with a simple example, which is probably the way most people
use it. In radius_shorthand.html, two
<div>
elements are styled like this:
