Border basics

Learn border-width, border-style and border-color properties.

What is a border?

A border is the frame drawn around the content and padding layers of a box. Three properties work together: border-width sets thickness, border-style sets line type and border-color sets color.

Only border-style is required. If the style is none, the border is not drawn even when width and color are set. That is why you pick a style first for a visible border.

border-style values

border-style takes a few commonly used values. solid draws one unbroken line, dashed short segments, dotted dots and double two parallel lines.

Two special values exist: none removes the border entirely, hidden hides it but still resolves border conflicts in table cells. In most cases solid gives the cleanest result.

Exercise Give the button a border

Write a declaration block for the .button selector. Add border-width, border-style and border-color declarations. For example border-width: 2px, border-style: solid and border-color: #3366cc.

Show example solution

/* add the button border */
.button {
  border-width: 2px;
  border-style: solid;
  border-color: #3366cc;
}

Test yourself

Which property sets the line type (solid, dashed, dotted) of the border?
- border-color
- border-style
- border-width
- background-color
Show answer

border-style — Correct. border-style sets the line type; values include solid, dashed and dotted.

Write the unbroken line type

.box {
  border-width: 2px;
  border-style: ____;
  border-color: #444;
}

Show answer

.box {
  border-width: 2px;
  border-style: solid;
  border-color: #444;
}

Match each property to its job

border-width

Border thickness
border-style

Line type
border-color

Border color

Next lesson: Border shorthand

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies