CSS Border Basics

Every element in CSS can have a border. Borders appear between an element's padding and margin, and require three properties to be visible: style, width, and color.

border-style

The border-style property defines the type of border line. Without a style, no border appears:

CSS

.solid { border-style: solid; }       /* Continuous line */
.dashed { border-style: dashed; }     /* Dashed line */
.dotted { border-style: dotted; }     /* Dotted line */
.double { border-style: double; }     /* Two parallel lines */
.groove { border-style: groove; }     /* 3D grooved appearance */
.ridge { border-style: ridge; }       /* 3D ridged appearance */
.inset { border-style: inset; }       /* 3D inset appearance */
.outset { border-style: outset; }     /* 3D outset appearance */
.none { border-style: none; }         /* No border */
.hidden { border-style: hidden; }     /* Same as none */

You can set different styles for each side:

CSS

/* top right bottom left */
.mixed { border-style: solid dashed dotted double; }

border-width

Controls the thickness of the border:

CSS

.thin { border-width: 1px; }
.medium { border-width: 2px; }
.thick { border-width: 4px; }

/* Different widths per side */
.uneven { border-width: 1px 2px 3px 4px; } /* top right bottom left */

/* Keyword values */
.kw-thin { border-width: thin; }     /* Usually 1px */
.kw-medium { border-width: medium; } /* Usually 3px */
.kw-thick { border-width: thick; }   /* Usually 5px */

border-color

Sets the color of the border:

CSS

.colored { border-color: #3498db; }
.rgba-border { border-color: rgba(0,0,0,0.2); }

/* Different colors per side */
.multi { border-color: red green blue orange; }

/* Inherits text color */
.inherit { border-color: currentColor; }

The border Shorthand

Combine width, style, and color in one declaration:

CSS

/* border: width style color */
.box { border: 1px solid #ddd; }
.card { border: 2px solid #3498db; }
.alert { border: 3px dashed #e74c3c; }

Individual Side Borders

You can set borders on specific sides:

CSS

.top-only { border-top: 2px solid #333; }
.bottom-only { border-bottom: 1px solid #eee; }
.left-accent { border-left: 4px solid #3498db; }
.right-line { border-right: 1px dashed #999; }

Common Patterns

CSS

/* Card with top accent */
.card {
  border: 1px solid #eee;
  border-top: 4px solid #3498db;
}

/* List item separator */
.list-item {
  border-bottom: 1px solid #f0f0f0;
}
.list-item:last-child {
  border-bottom: none;
}

/* Sidebar indicator */
.active-item {
  border-left: 3px solid #27ae60;
  padding-left: 1rem;
}

border-radius

border-radius creates rounded corners:

CSS

/* All corners equal */
.rounded { border-radius: 8px; }
.pill { border-radius: 999px; }   /* Fully rounded pill shape */
.circle { border-radius: 50%; }    /* Perfect circle (equal width/height) */

/* Individual corners */
.custom {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Shorthand: top-left top-right bottom-right bottom-left */
.custom { border-radius: 10px 10px 0 0; }

Elliptical Corners

Create asymmetric rounding with the / syntax:

CSS

/* horizontal-radius / vertical-radius */
.elliptical { border-radius: 50px / 25px; }

/* Different per corner */
.fancy { border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }

Practical Border Patterns

Input Field Styling

CSS

.input {
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease;
}

.input:focus {
  border-color: #3498db;
  outline: none;
}

Card Component

CSS

.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;  /* Clips content to rounded corners */
}

Avatar Circle

CSS

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  object-fit: cover;
}

Tag / Badge

CSS

.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid #3498db;
  border-radius: 999px;
  color: #3498db;
  font-size: 0.85rem;
}

Divider Line

CSS

.divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 2rem 0;
}

Removing Borders

CSS

/* Remove all borders */
.no-border { border: none; }

/* Remove specific side */
.no-top { border-top: none; }

/* Remove from buttons and inputs */
button { border: none; }

Summary

CSS borders are essential for visual structure and design. Use the border shorthand for quick styling, individual side borders for accents and separators, and border-radius for rounded corners. Borders enhance cards, buttons, inputs, avatars, and navigation elements. Combine with transitions for interactive effects on hover and focus.