CSS border Property

What You’ll Learn

The border property is a CSS shorthand for drawing a frame around an element. With one line of CSS you can set the border width, style, and color to define boundaries and improve visual structure.

Definition and Usage

The border CSS property is a shorthand that sets an element’s border width, border style, and border color in a single declaration. Borders help separate content, highlight cards and buttons, and make layouts easier to scan.

Borders are an essential part of web design because they define the edges of elements and add structure to a page. You can apply the same border to all four sides, or use individual properties such as border-top when you need more control.

📝 Syntax

The border shorthand accepts one, two, or all three border parts: width, style, and color.

selector {
  border: width style color;
}

Basic Example

div {
  border: 2px solid black;
  padding: 10px;
}

Syntax Rules

• The usual order is width, then style, then color.
• You can omit values, but border-style must not be none for the border to show.
• Longhand properties include border-width, border-style, and border-color.
• Side-specific shorthands include border-top, border-right, border-bottom, and border-left.
• Borders sit between an element’s padding and margin in the CSS box model.

Default Value

If the border property is not set, the default is effectively medium none currentColor. That means the border style is none, so no border is visible even if width or color values exist elsewhere.

💎 Property Values

The border shorthand combines three parts: width, style, and color.

Border Width

Defines how thick the border is. Use length units or keywords.

Border Style

Determines how the border line looks. none hides the border.

• none — No border (default style).
• solid — A continuous line.
• dotted — A series of dots.
• dashed — A series of dashes.
• double — Two solid lines.
• groove, ridge, inset, outset — 3D-style border effects.

Border Color

Sets the border color using any valid CSS color value.

Border Shorthand vs Longhand

Besides the main border shorthand, CSS provides longhand and side-specific properties for finer control.

Examples Gallery

Try the border shorthand with solid lines, dashed outlines, custom colors, and single-side borders.

<style>
  div {
    border: 2px solid black;
    padding: 10px;
  }
</style>

<div>
  This div element has a 2px solid black border.
</div>

.dashed { border: 2px dashed #2563eb; }
.dotted { border: 2px dotted #dc2626; }
.double { border: 4px double #059669; }

.card {
  border: 1px solid #7c3aed;
  border-radius: 0.75rem;
  padding: 1rem;
  background: #faf5ff;
}

.nav-item {
  border-bottom: 3px solid #2563eb;
  padding-bottom: 0.35rem;
}

💡 Best Practices