CSS Border

border

Every border has three parts: width, style, and color. border-style is required; without it, no border appears regardless of what else you set.

/* Longhand */
p {
  border-width: 5px;
  border-style: solid;
  border-color: black;
}

/* Shorthand: width style color */
p {
  border: 5px solid black;
}

Common border styles:

.solid   { border: 2px solid black; }
.dotted  { border: 2px dotted gray; }
.dashed  { border: 2px dashed gray; }
.double  { border: 4px double black; }
.none    { border: none; }

Individual sides

You can style each side independently using border-top, border-right, border-bottom, and border-left.

div {
  border-left: 5px solid yellow;
  border-right: 10px dotted red;
  border-bottom: 20px double green;
  border-top: 15px dashed blue;
}

border-radius

border-radius rounds the corners of an element. Use 50% on a square element to make a circle.

/* Rounded card */
.card {
  border-radius: 8px;
}

/* Circle */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

box-shadow

box-shadow adds a shadow outside (or inside) an element. The format is: offset-x offset-y blur-radius color.

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

Add inset at the start to draw the shadow inside the element instead of outside.

.inset-shadow {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

outline vs border

outline looks similar to border but behaves differently:

  • Outline is drawn outside the border and does not affect the layout (it takes up no space).
  • Border is part of the box model and affects element size and spacing.

Outline is mainly used for keyboard focus indicators. Do not remove outline from focusable elements (buttons, links, inputs) without replacing it with another visible focus style; doing so harms accessibility for keyboard users.

button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}