HTML and CSS Reference
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_
Figure 9-11. The rectangular background remains visible through a translucent border