CSS Borders

The border property draws a line around an element. A border needs three things: a width, a style and a colour.

p {
  border: 2px solid #0073aa;
}

---

Border style

Value	Look
solid	A continuous line
dashed	Dashes
dotted	Dots
double	Two lines
groove, ridge, inset, outset	3D effects
none	No border

A border will not show without a style. border: 2px red; does nothing, because the style is missing.

---

Width and colour

.box {
  border-width: 3px;
  border-style: solid;
  border-color: tomato;
}

---

Borders on one side

.box {
  border-bottom: 3px solid navy;
  border-left: 5px solid orange;
}

/* or by value order: top right bottom left */
.box2 {
  border-width: 1px 2px 3px 4px;
}

---

Rounded borders

Use border-radius. See Rounded Corners.

---

Summary

• A border needs width, style and colour: border: 2px solid red;.
• Use border-top, border-right, border-bottom and border-left for one side.
• Next: Rounded Corners.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.