Borders:

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

The Box Model

Margin

Border

Padding

The Content!

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:

• Width
• Style
• Color

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.

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: width, style, 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 - Determines the number of pixels horizontally and vertically to curve. This results in a box with equally curved corners.
• Percentages - Determines the percent of each corner’s horizontal and vertical curve. This results in boxes which start to resemble ovals.

This property can also have each corner set all at once by supplying either four values, or four values representing the horizontal corner curve amounts. A forward slash followed by four more values represents the vertical corner curve amounts.

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: ;
}

Cut here.

{ TODO: }

Read pages 309-312 of Chapter 13 in Duckett.