# 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 include solid, dotted and slashed.
• 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:

1. Fork the starting prototype. It includes five containers with some necessary styles.
2. Apply appropriate background and text colors to all buttons.
3. Apply a subtle border radius to the Primary, the Secondary, the Ghost and the Alert buttons.
4. Apply a pixel-wide solid border to the Ghost and the Pill buttons.
5. Apply a border radius of 9999px to the Pill button. This tricks makes containers fully rounded on the sides.