Game Development Reference
In-Depth Information
drawn outside it */
}
The border radius
The border radius property allows us to round the corners of the container formed
by an element's dimensions. If there is any content where the rounding of the corner
reduces the physical area of the container, that content is not drawn. Finally, the bor-
der radius declaration can be specified by a single value, where that value is applied
to all corners (observe that here we refer to corners, not sides, as in a border declar-
ation), by supplying four different values (where the corners would be targeted in the
order top-left, top-right, bottom-right, and bottom-left), or by targeting each corner in-
dividually.
div.one {
border-radius: 5px; /* Make all four corners
round by 5px */
}
div.two {
border-radius: 5px 10px
/* Top left and bottom right = 5px, top right
andbottom left = 10px */
div.three {
border-top-left-radius: 4px;
border-top-right-radius: 8px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 16px;
}
