Putting it All Together - HTML5 with CSS3 - page 384

Listing 10-29. Using percentages with border-radius
.square {
width: 200px;
height: 200px;
border-radius: 20%;
}
.rectangle {
width: 350px;
height: 200px;
border-radius: 20%;
}
You can see the results in Figure 10-28, with the square box on the left and the rectangular box on the
right. Both of these boxes have the same single percentage value for border-radius , but the rectangular
box has elliptical corners because it's wider than it is tall. This is important to know because, given a liquid-
width box or an element containing text that can reflow and change height, percentages will rarely deliver
consistent rounded corners.
Figure 10-28. Two boxes with border-radius:20% . The rectangular box has elliptical corners because percentage
values are based on the lengths of each side.
A corner's radius can't exceed the size of the box; the browser won't be able to draw
such a mathematical impossibility. If the radius is too great the corners might be drawn
with whatever maximum radius the box can accommodate, but some browsers may
ignore the impossible radius and draw the box without rounded corners at all.
Although the browser draws the box with rounded corners, this is strictly a visual effect and the contents of
the element can still overflow those corners. For example, you can turn a box into an oval with border-
radius:50% , but any text inside the element will still flow as if it's in a box with 90-degree corners, like you
see in Figure 10-29. Boxes with rounded corners often need some padding to keep the text within the
border.
Figure 10-29. Content inside an element styled with rounded corners still flows in the shape of a box