CSS Borders

Borders are the thin outlines that sit between an element’s padding and margin. They define the perimeter of an element and can be styled in countless ways from simple solid lines to creative image-based frames.

Border Properties Overview

  • border-style → defines the look (solid, dashed, dotted, etc.)
  • border-width → controls thickness (thin, medium, thick, or custom values)
  • border-color → sets the color (defaults to text color if not specified)
  • border (shorthand) → combines width, style, and color in one line
  • border-radius → rounds corners for softer shapes
  • border-image → uses images as borders for creative designs

Border Style

The border-style property defines how the border looks. Options include:

  • solid
  • dashed
  • dotted
  • double
  • groove
  • ridge
  • inset
  • outset
  • none (default)
  • hidden

You can set styles per edge:

Code Block Loading...

Border Width

Controls thickness. Options:

  • thin
  • medium (default)
  • thick
  • Or custom values like 2px, 0.5em, etc.

Code Block Loading...

Border Color

Defines the border’s color. If not set, it inherits the text color.

Code Block Loading...

Border Shorthand

Combine width, style, and color:

Code Block Loading...

Or per edge:

Code Block Loading...

Border Radius

Rounds corners:

Code Block Loading...

Per corner:

Code Block Loading...

Border Images

Borders can use images for creative effects:

Code Block Loading...

Interactive Playground

Key Takeaways

  • Borders define the visual perimeter of elements.
  • You can control style, width, color, radius, and even use images.
  • Shorthand properties (border) simplify code.
  • Interactive experimentation helps cement understanding.