HTML and CSS Reference
In-Depth Information
Additionally, styles for individual border sides may be controlled at an even finer level. For
example, if we wish to change only the
width
of the bottom border we can use the fol-
lowing code:
1.
div {
2.
border-bottom-width: 12px;
3.
}
These highly specific longhand border properties include a series of hyphen-separated
words starting with the
border
base, followed by the selected side—
top
,
right
,
bot-
tom
, or
left
—and then
width
,
style
, or
color
, depending on the desired property.
Border Radius
While we're looking at borders and their different properties, we need to examine the
border-radius
property, which enables us to round the corners of an element.
The
border-radius
property accepts length units, including percentages and pixels,
that identify the radius by which the corners of an element are to be rounded. A single
value will round all four corners of an element equally; two values will round the
top-
left
/
bottom-right
and
top-right
/
bottom-left
corners in that order; four val-
ues will round the
top-left
,
top-right
,
bottom-right
, and
bottom-left
corners in that order.
When considering the order in which multiple values are applied to the
border-radius
property (as well as the
margin
and
padding
properties), remember that they move in a
clockwise fashion starting at the top left of an element.
1.
div {
2.
border-radius: 5px;
3.
}
Figure 4.5
Different border-radius sizes
Search WWH ::
Custom Search