11 - The Border Box

The Border Box

While you may not realize it, most elements have a border!

Let’s learn how to make these borders visible.

The way to apply a border to our elements with CSS is… you guessed it! With the border property!

The border property is actually another shorthand that lets us combine the values of multiple properties into one declaration:

/* Both of these are the same */
 
h1 {
  border: 2px solid blue;
}
 
h1 {
  border-width: 2px;
  border-style: solid;
  border-color: blue;
}

• border-width determines the “thickness” of the border, and is usually set with absolute units (e.g., pixels).
• border-style includes values like solid, dashed, dotted.
• border-color can be set with a named color, an rgb() value, or a hexadecimal.

We can also style a single border if we want, by using border-top, border-right, border-bottom, or border-left properties:

h1 {
  border-top: 5px dashed red;
  border-right: 5px dotted purple;
  border-bottom: 5px double yellow;
  border-left: 5px solid green;
}

Minus a few hidden styles, this is what the rendered output looks like:

# Round Corners

Another common practice for borders is rounding the corners using the border-radius property:

h1 {
  border: 2px solid blue;
  border-radius: 5px;
}

The rendered output will look like this:

You can use both absolute and relative units. The larger the value, the rounder the corner will be!