Borders, Outline & Rounded Corners

border adds a line around an element. You set width, style (solid, dashed, dotted), and color. You can style each side separately.

CSS Borders

border adds a line around an element. You set width, style (solid, dashed, dotted), and color. You can style each side separately.

Real-life example: A border is like a frame around a picture. width is frame thickness, style is frame pattern, color is frame paint.

Border basics

.box {
  border: 2px solid #0891b2;
  padding: 1rem;
}

.card {
  border-top: 4px solid #7c3aed;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
}

.dashed {
  border: 2px dashed #94a3b8;
}

Outline

outline draws a line outside the border. It does not take space in layout. Browsers use it for keyboard focus rings — do not remove focus styles without replacing them.

Real-life example: outline is like a highlighter pen around a box — it sits outside and does not push other boxes away.

Outline for accessibility

button:focus-visible {
  outline: 3px solid #0891b2;
  outline-offset: 2px;
}

/* Avoid this without a replacement */
/* button:focus { outline: none; } */

Rounded Corners (border-radius)

border-radius rounds the corners of an element. Use small values for cards and large values (or 999px) for pill buttons.

Real-life example: border-radius is like cutting rounded corners on paper with scissors instead of sharp 90-degree corners.

border-radius patterns

.card {
  border-radius: 12px;
}

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

.pill {
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
}

.fancy {
  border-radius: 20px 4px 20px 4px;
}

Border Images

border-image lets you use a picture as a border. It is advanced and less common than solid borders, but useful for decorative frames.

Real-life example: border-image is like wrapping a gift with a patterned ribbon that becomes the box edge.

For most UI work, solid border + border-radius is enough. Save border-image for special decorative designs.

Simple border-image

.fancy-frame {
  border: 16px solid transparent;
  border-image: url("frame.png") 30 round;
  padding: 1rem;
}