Border
Width, style and color
It takes 3 properties to apply an outline to a container:
border-width
specifies the thickness of an outline.border-style
allows you to choose from a number of styles that includesolid
,dotted
andslashed
.border-color
predictably specifies the color of an outline.
<div style="border-width: 2px;
border-style: solid;
border-color: teal;">
Bordered container
</div>
You can also use a shorthand property border
, that allows you to specify all three values in a single property:
border: 2px solid #000;
The order is important—width goes first, then style, then color. Also, the border
property has variations that allow you to specify which side of a container you want to apply a border to:
<div style="border-top: 1px solid silver;
border-bottom: 2px solid black;">
A container with borders at the top and the bottom
</div>
The available suffixes are -top
, -bottom
, -left
and -right
. As you can see in the example above, you can apply different borders to different sides of a container.
To remove a border from a container, apply border: none
.
Radius
The border-radius
property rounds the corners of a container:
<div style="border: 1px solid teal;
border-radius: 4px;
text-align: center;
color: teal;">
OK
</div>
You don’t have to apply a border to see the effect of the border-radius
property. If a container has a background color you will be able to see the round corners too:
<div style="background-color: teal;
border-radius: 4px;
text-align: center;
color: white;">
OK
</div>
Practice
Design a set of buttons:
- Fork the starting prototype. It includes five containers with some necessary styles.
- Apply appropriate background and text colors to all buttons.
- Apply a subtle border radius to the Primary, the Secondary, the Ghost and the Alert buttons.
- Apply a pixel-wide solid border to the Ghost and the Pill buttons.
- Apply a border radius of 9999px to the Pill button. This tricks makes containers fully rounded on the sides.