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:
Click here to view code image
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.
Click here to view code image
1. div {
2. border-radius: 5px;
3. }
Figure 4.5 Different border-radius sizes
Search WWH ::

Custom Search