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

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

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.


The border-radius property rounds the corners of a container:


<div style="border: 1px solid teal;
            border-radius: 4px;
            text-align: center;
            color: teal;">

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;">


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.