← Blog
Web Design8 min

How CSS Borders and border-radius Work

Master the CSS border shorthand, per-side control, border-radius per corner, and techniques for creating custom shapes.

The Border Shorthand

/* Shorthand: width style color */
      border: 2px solid #3b82f6;

      /* Longhand equivalents */
      border-width: 2px;
      border-style: solid;
      border-color: #3b82f6;

The style keyword is required — without it, the border is invisible even if width and color are set.

Border Style Values

  • solid — a single solid line (most common)
  • dashed — a dashed line; dash length is browser-defined
  • dotted — a dotted line; dot size equals border-width
  • double — two solid lines; total width equals border-width
  • groove / ridge — 3D inset/outset effects using border-color
  • inset / outset — 3D beveled appearance
  • none / hidden — no border (hidden takes priority in table collapsing)

Per-Side Control

/* Individual sides */
      border-top: 3px solid red;
      border-right: 1px dashed blue;
      border-bottom: 2px dotted green;
      border-left: none;

      /* Per-side width shorthand (top right bottom left) */
      border-width: 1px 2px 3px 0;
      border-style: solid dashed dotted none;
      border-color: red blue green transparent;

border-radius

border-radius rounds the corners of an element. It accepts one to four values following the same box model pattern as padding/margin:

/* All corners equal */
      border-radius: 8px;

      /* top-left/bottom-right  top-right/bottom-left */
      border-radius: 16px 4px;

      /* top-left  top-right/bottom-left  bottom-right */
      border-radius: 16px 4px 8px;

      /* top-left  top-right  bottom-right  bottom-left */
      border-radius: 16px 4px 8px 2px;

      /* Elliptical radius (horizontal / vertical) */
      border-radius: 50% / 30%;

Per-Corner Longhand

border-top-left-radius: 16px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 16px;
      border-bottom-left-radius: 4px;

Creative Shapes with border-radius

Perfect circle

.circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }

Pill / capsule

.pill {
        border-radius: 9999px; /* large enough to always be fully rounded */
      }

Squircle (super-ellipse)

/* App icon style */
      .squircle {
        border-radius: 22% 78% 26% 74% / 21% 29% 71% 79%;
      }

Triangle using borders

/* Classic CSS triangle trick */
      .triangle-up {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 35px solid #3b82f6;
      }

outline vs border

outline looks similar to border but has key differences:

  • Outline does not take up space in the layout (no impact on box model)
  • Outline cannot be applied per-side
  • Outline ignores border-radius by default (though outline-offset can add spacing)
  • Outline is used for focus indicators — removing it breaks keyboard accessibility

Logical Properties

For internationalized designs (supporting RTL languages like Arabic or Hebrew), prefer logical border properties:

/* Physical */
      border-left: 3px solid blue;

      /* Logical — adapts to text direction */
      border-inline-start: 3px solid blue;