Borders

The last part of The Box Model we are going to look at are “borders”.

Like margin and padding, borders help define the amount of space a box or element takes up, as well as its relationship to other boxes. Unlike margin and padding, the border portion of the box can be separately colored, and has multiple style options. Border is more of a visual styling tool, than a space management tool.

There are three properties that make up border;

Border Width

The first property that defines a boxes border is the “ border width” (border-width: ). This takes a measurement value, just like padding and margin, that may be pixels, points, percentages, or ems.

Border Style

The second property that defines a boxes border is the “border style” (border-style: ). This takes a predefined keyword as its property;

• solid
• dashed
• dotted
• double
• inset
• outset
• groove
• ridge
• hidden
• none

Border Color

The final property that defines borders is “border color” (border-color: ). Border color, like color: and background-color: , accepts an rgb(), rgba(), hex, or other color value.

Example 1

In the following example, notice how the addition of a border changes the space that each box takes up.

.parent-container-01 {
    background-color: #ecea16;
    max-width: 400px;
    padding: 2em;
    margin: auto;
    margin-bottom: 1em;
}
.child-container-01 {
    background-color: #3fa1a4;
    width: 75%;
    margin: auto;
    padding: 1em;
    text-align: center;
}
.parent-container-02 {
    background-color: #ecea16;
    max-width: 400px;
    padding: 2em;
    margin: auto;
    border-width: 1em;
    border-style: outset;
    border-color: #262626;
}
.child-container-02 {
    border-width: 2em;
    border-style: solid;
    border-color: #262626;
    background-color: #3fa1a4;
    width: 75%;
    margin: auto;
    padding: 1em;
    text-align: center;
}

<div class="parent-container-01">
    <div class="child-container-01">
        <em>No borders....</em>
    </div>
</div>
<div class="parent-container-02">
    <div class="child-container-02">
        <em>Big Thick Borders!</em>
    </div>
</div>

Border Shortcut Property

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. In this case, the property to define the entire border, is simply border: . As its declaration, it expects three values, in order;

1. width
2. style
3. color

div {
    border: 2px solid #623529;
}

Border Radius

An additional border property that can be defined is “border radius” (border-radius: ). This changes the corners of a border and defines the amount of “curve”.

This property can be set with;

• pixels; which determines the number of pixels horizontally and vertically to curve. This results in a box with equally curved corners
• percentages; which determines the percent of each corners horizontal and vertical curve. This results in boxes which start to resemble ovals.

This property can also have each corner set at once, by supplying either four values or four values representing the horizontal corner curve amounts with a forward slash then four more representing the vertical corner curve amounts.

.parent-container-03 {
    border: 3px solid #000;
    border-radius: 20px;
    background-color: #ecea16;
    width: 90%;
    padding: 2em;
    margin: auto;
}
.child-container-03 {
    width: 75%;
    margin: 1em auto;
    padding: 1em;
    text-align: center;
    border: 10px solid #fff;
    background-color: #3fa1a4;
}
.border-01 {
    border-radius: 100%;
}
.border-02 {
    border-radius: 100px;
}
.border-03 {
    border-radius: 3em 10em 10em 2em / 10em 3em 10em 2em;
}

<div class="parent-container-03">
    <div class="child-container-03 border-01">
        <em>Great Curved Borders.</em>
        <br>What fun these are.
        <br>What a nice oval
    </div>
    <div class="child-container-03 border-02">
        <em>Great Curved Borders.</em>
        <br>What fun these are.
        <br>Its like a rounded rectangle.
    </div>
    <div class="child-container-03 border-03">
        <em>Great Curved Borders.</em>
        <br>Different Corners!
        <br>Mind = Blown
    </div>
</div>

Individual Sides

As with padding and margin, 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-bottom: ;
    border-left: ;
    border-right: ;

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

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

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