The border sits between padding and margin, forming the visible edge of an element.

Border Properties

Three main properties control borders:

• border-style - The line style
• border-width - The thickness
• border-color - The color

Border Style

The border-style property determines the line appearance:

Value	Description
solid	A solid line
dashed	Dashed line
dotted	Dotted line
double	Two solid lines
groove	3D grooved effect
ridge	3D ridged effect
inset	3D inset effect
outset	3D outset effect
none	No border (default)

.box {
  border-style: solid;
}

Border Width

Set thickness with border-width:

.box {
  border-width: 2px;
}

Predefined values: thin, medium, thick

Border Color

Set color with border-color:

.box {
  border-color: #333;
}

If not set, the border uses the element’s text color.

Shorthand

Combine all three in one declaration:

.box {
  border: 2px solid black;
}

Order: width style color

Individual Sides

Target specific sides:

.box {
  border-top: 2px solid red;
  border-right: 1px dashed blue;
  border-bottom: 2px solid red;
  border-left: 1px dashed blue;
}

Or use specific properties:

• border-top-style, border-top-width, border-top-color
• Same pattern for right, bottom, left

Border Radius

Round the corners with border-radius:

.box {
  border-radius: 8px;
}

Different Corners

.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Shorthand (clockwise from top-left):

border-radius: 10px 10px 0 0;

Creating Circles

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Common Patterns

Simple Card Border

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
}

Bottom Border Only

.nav-item {
  border-bottom: 2px solid transparent;
}
.nav-item:hover {
  border-bottom-color: blue;
}

Pill Shape

.pill {
  border-radius: 9999px;
}

Lessons in this unit:

0:	Introduction
1:	Understanding the CSS Box Model
2:	How to Use CSS Box Sizing
3:	How to Use CSS Margin
4:	How to Use CSS Padding
5:	▶︎ How to Style CSS Borders