CSS Border

Styling Borders with CSS

Learn how to add and customize borders around HTML elements.

CSS Border Properties
CSS border properties allow you to control the style, width, and color of an element's border.

Border Style: `border-style`

The border-style property is required to make any border visible. It defines the type of line to draw.

Common border-style values include:

solid: A single, solid line.
dotted: A series of dots.
dashed: A series of short dashes.
double: Two parallel solid lines. The border-width defines the total width, including the space between lines.
groove, ridge, inset, outset: 3D-effect borders (appearance depends on border-color). These are less common in modern flat design trends.
none: No border (default).
hidden: Same as none, but has implications for border conflict resolution in tables.

/* You MUST set a border-style for other border properties to work */
.box {
  border-style: solid;
}

Border Width: `border-width`

The border-width property sets the thickness of the border.

It accepts length values (e.g., px, em, rem) or predefined keywords: thin, medium, thick.

Remember: border-width has no effect without a border-style other than none or hidden.

.card {
  border-style: solid;
  border-width: 2px; /* Common pixel value */
}

.separator {
  border-style: dashed;
  border-width: thin; /* Predefined keyword */
}

.important-section {
    border-style: double;
    border-width: 0.5rem; /* Using relative units */
}

Border Color: `border-color`

The border-color property sets the color of the border.

You can use any valid CSS color format (HEX, RGB/RGBA, HSL/HSLA, color names). The keyword transparent can also be used.

If border-color is not explicitly set, the border will typically inherit the element’s color (text color) property.

Again, this requires a border-style to be set.

.alert-box {
  border-style: solid;
  border-width: 1px;
  border-color: red; /* Using a color name */
}

.subtle-highlight {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc; /* Using HEX */
}

.interactive-element {
    border-style: solid;
    border-width: 2px;
    border-color: hsl(200, 80%, 50%); /* Using HSL */
}

Individual Side Borders

You can style each border side (top, right, bottom, left) individually using specific properties:

border-top-style, border-right-style, border-bottom-style, border-left-style
border-top-width, border-right-width, border-bottom-width, border-left-width
border-top-color, border-right-color, border-bottom-color, border-left-color

/* Example: Underline effect using only bottom border */
.section-title {
  padding-bottom: 0.5em; /* Space between text and border */
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-bottom-color: cornflowerblue;
}

You can also use shorthands for border-style, border-width, and border-color to set multiple sides at once, using 1, 2, 3, or 4 values (similar to margin or padding):

/* Two values: top/bottom, left/right */
.special-box {
  border-style: solid dotted;
  border-width: 2px 5px;
  border-color: red blue;
}

/* Four values: top, right, bottom, left */
.complex-box {
  border-style: solid dashed dotted double;
  border-width: 1px 2px 3px 4px;
  border-color: red green blue yellow;
}

Border Shorthand Property: `border`

To simplify code, the border shorthand property sets the border-width, border-style, and border-color for all four sides in one declaration.

The order usually doesn’t matter, but the common convention is width style color.

/* Common usage */
.button {
  border: 1px solid #999;
}

/* More complex example */
.fancy-border {
  border: thick dashed green;
}

You can also set individual sides using shorthands like border-top, border-right, border-bottom, and border-left:

.header {
  border-bottom: 2px solid #eee;
}

.sidebar {
    border-left: 1px dotted rgba(0,0,0,0.2);
}

Additional Border Feature: `border-radius`

A very common property used with borders is border-radius, which allows you to create rounded corners.

.rounded-box {
  border: 1px solid #aaa;
  padding: 1em;
  border-radius: 8px; /* Applies to all corners */
}

.pill-button {
    border: 1px solid transparent;
    background-color: blue;
    color: white;
    padding: 0.5em 1.5em;
    /* Large radius creates pill shape */
    border-radius: 999px;
}

You can specify different radii for each corner. Explore border-radius on MDN.

All CSS Border Properties Reference

Property	Description
`border`	Shorthand for `border-width`, `border-style`, `border-color` (all sides).
`border-width`	Shorthand for setting the width of all four borders.
`border-style`	Shorthand for setting the style of all four borders (required).
`border-color`	Shorthand for setting the color of all four borders.
`border-top`, `-right`, `-bottom`, `-left`	Shorthands for width, style, color of a specific side.
`border-top-width`, etc.	Sets the width of a specific side.
`border-top-style`, etc.	Sets the style of a specific side.
`border-top-color`, etc.	Sets the color of a specific side.
`border-radius`	Sets the radius of the element’s corners.
`border-image`	Allows using an image as the border (advanced).
`border-collapse`	Used in tables to specify if borders should collapse into a single border or be separate.
`border-spacing`	Used in tables with `border-collapse: separate` to specify distance between cell borders.

CSS Border

Styling Borders with CSS

Border Style: border-style

Border Width: border-width

Border Color: border-color