CSS Borders

1) Border Style

.box {
  border-style: solid;
}

Common styles: none, solid, dashed, dotted, double, groove, ridge, inset, outset.

2) Border Width & Color

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

Units for width: px, em, rem. Color can be name, hex, rgb/rgba, hsl/hsla.

3) Border Shorthand

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

Order: width → style → color.

4) Individual Sides

.note {
  border-top: 3px solid #ff9800;
  border-right: 0;
  border-bottom: 3px solid #ff9800;
  border-left: 0;
}

5) Rounded Corners (border-radius)

.rounded {
  border: 2px solid #666;
  border-radius: 12px;
}

6) Circle & Pill Shapes

.avatar {
  width: 100px;
  height: 100px;
  border: 3px solid #1E88E5;
  border-radius: 50%; /* makes a perfect circle */
}

.pill {
  border: 2px solid #43A047;
  border-radius: 9999px; /* large value for pill */
  padding: 6px 14px;
}

7) Outline vs Border

.focusable:focus {
  outline: 3px solid #ff5722; /* does not affect layout */
}

Border takes space and affects layout; outline draws on top and doesn’t shift layout—useful for focus styles.

8) Border Image (Bonus)

.fancy {
  border: 12px solid transparent;
  border-image: url('border-slice.png') 30 round;
}

border-image slices an image and uses it as the element’s border. Values are: source slice repeat (plus optional width and outset).