Drawing Edges

The first thing we’ll look at in the box model are borders. You are already familiar with borders through your past assignments, but there’s a lot we haven’t explored yet.

You can create a border in one lump property (known as the “shorthand”), or each side and property individually.

Border Shorthand Property

For borders, the property to define the entire border is simply border: . As its declaration, it expects three values, in order: width, style, color.

div {
    border: 2px solid #623529;
}

Individual Border Properties

You may also define each side of a box individually for each partial border property or for the single border property. Simply add the side in question:

div {
    border: ;
    border-top: ;
    border-right: ;
    border-bottom: ;
    border-left: ;

    border-width: ;
    border-top-width: ;
    border-right-width: ;
    border-bottom-width: ;
    border-left-width: ;

    border-style: ;
    border-top-style: ;
    border-right-style: ;
    border-bottom-style: ;
    border-left-style: ;

    border-color: ;
    border-top-color: ;
    border-right-color: ;
    border-bottom-color: ;
    border-left-color: ;
}

NOTE: A number of CSS properties that take multiple property declarations to define also offer the option of defining the entire thing with a single property.