Borders in CSS

Borders add structure and visual definition to elements. The `border` property is a shorthand that combines width, style, and color.

Border Basics

CSS

/* Shorthand: width style color */
.box {
  border: 2px solid #333;
}

/* Individual properties */
.detailed {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

Border Styles

CSS

.solid   { border: 2px solid #333; }
.dashed  { border: 2px dashed #333; }
.dotted  { border: 2px dotted #333; }
.double  { border: 4px double #333; }
.groove  { border: 3px groove #999; }
.ridge   { border: 3px ridge #999; }
.inset   { border: 3px inset #999; }
.outset  { border: 3px outset #999; }
.none    { border: none; }

Individual Side Borders

CSS

.card {
  border-top: 4px solid #3498db;
  border-bottom: 1px solid #eee;
}

.sidebar-item {
  border-left: 3px solid transparent;
  padding-left: 12px;
}

.sidebar-item.active {
  border-left-color: #3498db;
  background-color: #f0f7ff;
}

.table-cell {
  border-bottom: 1px solid #e0e0e0;
  padding: 12px;
}

Border Radius

The `border-radius` property rounds corners.

CSS

/* All corners */
.rounded { border-radius: 8px; }
.more-rounded { border-radius: 16px; }
.pill { border-radius: 50px; }

/* Circle - requires equal width and height */
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

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

.speech-bubble {
  border-radius: 16px 16px 16px 0;
}

/* Practical examples */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.button {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  background-color: #3498db;
  color: white;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  background-color: #e8f4fd;
  color: #2980b9;
  font-size: 0.875rem;
}

Box Shadow

The `box-shadow` property adds shadows to elements, creating depth and visual hierarchy.

CSS

/* Syntax: offset-x offset-y blur-radius spread-radius color */

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.shadow-xl {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

Shadow Properties Explained

offset-x: Horizontal position (positive = right, negative = left)
offset-y: Vertical position (positive = down, negative = up)
blur-radius: How blurry the shadow is (larger = softer)
spread-radius: How much the shadow expands or contracts
color: Shadow color (use rgba for transparency)

CSS

/* Directional shadows */
.shadow-right { box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1); }
.shadow-bottom { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
.shadow-left { box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); }
.shadow-top { box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1); }

/* Spread radius */
.tight-shadow { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1); }
.wide-shadow { box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.1); }

Multiple Shadows

You can layer multiple shadows for more realistic effects.

CSS

.layered-shadow {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.07);
}

.material-shadow {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

Inset Shadows

The `inset` keyword creates an inner shadow.

CSS

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

/* Pressed button effect */
.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Input field focus */
input:focus {
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(52, 152, 219, 0.3);
}

Interactive Shadows

Shadows work great with hover effects for interactive cards and buttons.

CSS

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

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

.button {
  padding: 12px 24px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
  transition: box-shadow 0.2s ease;
  cursor: pointer;
}

.button:hover {
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

Text Shadow

The `text-shadow` property adds shadows to text.

CSS

/* Syntax: offset-x offset-y blur-radius color */

.subtle-text-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.heading-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* White text on dark background */
.hero-title {
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Multiple text shadows for glow effect */
.glow-text {
  color: white;
  text-shadow:
    0 0 10px rgba(52, 152, 219, 0.8),
    0 0 20px rgba(52, 152, 219, 0.5),
    0 0 40px rgba(52, 152, 219, 0.3);
}

Outline

The `outline` property draws a line outside the border. Unlike borders, outlines do not affect layout and do not take up space.

CSS

/* Focus outline for accessibility */
button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Custom focus style */
a:focus-visible {
  outline: 2px dashed #e74c3c;
  outline-offset: 3px;
}

/* Never remove outlines without providing an alternative */
/* Bad: */
*:focus { outline: none; }

/* Good: */
*:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

Important: Always keep focus indicators visible for keyboard users. This is essential for accessibility.

Summary

Borders, shadows, and outlines add depth and definition to your web designs. Use borders to separate content and define sections. Use box-shadow to create elevation and visual hierarchy. Use text-shadow sparingly for headings on dark backgrounds. Layer multiple shadows for realistic effects, and use transitions for smooth interactive hover states. Always maintain visible focus outlines for accessibility.

In the next article, you will learn about CSS gradients.