HTML and CSS Reference
In-Depth Information
How Borders Interact With Rounded Corners
When you use
border-radius
in combination with a border, the outer edge of the border is rounded. But the
border's inner shape depends on the border width and size of the border radius.
The example in border_alpha.html earlier in this chapter (see Figure
9-4
) uses a
15px
translucent border
around a
<div>
. If you set
border-radius
to the same value as the border width or less, the outer radius is curved,
but the corners of the padding box remain square, as shown in Figure
9-10
(the code is in rounded_alpha_15.html).
Figure 9-10.
Although the border has rounded external corners, the inner shape of the border is square
However, as soon as the
border-radius
exceeds the width of the border, the inner border is also rounded.
With an opaque border, there's no problem. But Figure
9-11
shows what happens with translucent borders.
The element's background retains its rectangular shape and protrudes into the border (the code is in rounded_
alpha_40.html).
Figure 9-11.
The rectangular background remains visible through a translucent border
