Borders

Difficulty: Beginner

The border is the layer between padding and margin in the CSS box model. It surrounds the padding area and can be styled with a width, style, and color. Borders are visible by default (unlike margins, which are transparent) and are one of the most visually impactful box model properties. They define element boundaries, create visual separation, and add decorative detail to components.

Each border side has three sub-properties: width, style, and color. For example, border-top-width, border-top-style, and border-top-color control the top border. The border-style property is the most important -- without a style, the border is invisible even if width and color are set. Common border styles include solid (continuous line), dashed (series of dashes), dotted (series of dots), double (two parallel lines), and none (no border). There are also groove, ridge, inset, and outset styles that create 3D-looking effects.

The border shorthand property combines width, style, and color in one declaration: border: 1px solid #333. You can also set individual sides: border-top: 2px dashed red. The shorthand is the most common way to declare borders in practice. You can mix and match by using the shorthand for most sides and then overriding a specific side: border: 1px solid gray; border-bottom: 3px solid blue creates a thin gray border with a thicker blue bottom.

The border-radius property rounds the corners of an element's border box. It can take one value (all corners equal), two values (top-left/bottom-right and top-right/bottom-left), or four values (each corner individually in clockwise order). Setting border-radius to 50% on a square element creates a perfect circle. You can also specify horizontal and vertical radii separately using the slash syntax: border-radius: 10px / 20px creates elliptical corners.

The outline property is visually similar to border but is fundamentally different. Outlines do not take up space in the layout -- they are drawn on top of the element without affecting its size or position. Outlines cannot have rounded corners (though outline now supports border-radius in modern browsers) and always surround the entire element (you cannot set outline-top independently). The most important use of outline is for focus indicators on interactive elements. Never remove outlines without providing an alternative focus indicator, as this breaks keyboard accessibility.

Code examples

Border Shorthand and Individual Sides

/* Border shorthand: width style color */
.card {
  border: 1px solid #e0e0e0;
}

/* Individual side borders */
.accent-left {
  border-left: 4px solid #007bff;
  padding-left: 16px;
}

/* Mix: uniform border with accent bottom */
.tab-active {
  border: 1px solid #ddd;
  border-bottom: 3px solid #007bff;
}

/* Remove a specific side */
.no-top-border {
  border: 1px solid #ccc;
  border-top: none;
}

The shorthand sets all four sides at once. Individual side properties override specific sides. This is useful for accent borders, tab indicators, and creating partial borders. Use border-top: none to remove a specific side.

Border Styles Gallery

.solid    { border: 3px solid #333; }
.dashed   { border: 3px dashed #333; }
.dotted   { border: 3px dotted #333; }
.double   { border: 4px double #333; } /* needs 3px+ to show */
.groove   { border: 4px groove #888; } /* 3D inset effect */
.ridge    { border: 4px ridge #888; }  /* 3D raised effect */
.inset    { border: 4px inset #888; }  /* box appears sunken */
.outset   { border: 4px outset #888; } /* box appears raised */
.hidden   { border: 3px hidden #333; } /* takes space but invisible */
.none     { border: none; }            /* no border, no space */

Solid, dashed, and dotted are by far the most commonly used. Double requires at least 3px width to show both lines. The 3D styles (groove, ridge, inset, outset) use the color to compute light and shadow shades. Hidden takes space but is invisible; none takes no space.

Border Radius

/* Uniform rounding */
.rounded {
  border: 2px solid #333;
  border-radius: 8px;
}

/* Pill shape (half the height) */
.pill {
  border: 2px solid #333;
  border-radius: 9999px;
  padding: 4px 16px;
}

/* Perfect circle (must be a square element) */
.circle {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 50%;
}

/* Individual corners */
.custom-corners {
  border: 2px solid #333;
  border-top-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
}

/* Elliptical corners: horizontal / vertical */
.elliptical {
  border: 2px solid #333;
  border-radius: 50px / 25px;
}

border-radius rounds the element's corners. Use a large value like 9999px for pill shapes. Use 50% on a square for a perfect circle. Individual corner properties allow asymmetric rounding. The slash syntax creates elliptical (non-circular) corners.

Outline vs Border

/* Border: takes up space in the layout */
.with-border {
  border: 3px solid blue;
  /* Total width increases by 6px (3px each side) */
}

/* Outline: does NOT take up space */
.with-outline {
  outline: 3px solid red;
  /* Total width is unchanged */
}

/* Outline offset: gap between element and outline */
.offset-outline {
  outline: 2px solid #007bff;
  outline-offset: 4px;
}

/* NEVER remove focus outlines without replacement */
/* Bad: */
button:focus {
  outline: none; /* Breaks accessibility! */
}

/* Good: custom focus style */
button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

Borders affect layout; outlines do not. Outline-offset creates space between the outline and the element edge. Always provide a visible focus indicator -- use :focus-visible to show outlines only for keyboard navigation, not mouse clicks.

Key points

Concepts covered

Border Properties, Border Shorthand, border-radius, Outline vs Border, Border Styles