CSS Borders

A border is a line drawn around the edge of an HTML element. CSS borders can be customized with different widths, styles, colors, and even rounded corners. Borders help visually separate elements, create card-like designs, and add structure to a layout.

The Three Core Border Properties

To display a visible border, at least three properties must be defined:

• border-width – How thick the border line is.
• border-style – What the line looks like (solid, dashed, dotted, etc.).
• border-color – The color of the border line.

div {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

border-style Values

The border-style property is the most important of the three. Without it, no border is visible — even if width and color are set.

/* Different border styles on individual paragraphs */
p.solid   { border-style: solid; }
p.dashed  { border-style: dashed; }
p.dotted  { border-style: dotted; }
p.double  { border-style: double; }
p.groove  { border-style: groove; }
p.ridge   { border-style: ridge; }
p.inset   { border-style: inset; }
p.outset  { border-style: outset; }
p.none    { border-style: none; }
p.hidden  { border-style: hidden; }

The most commonly used styles in real projects are solid, dashed, and dotted.

border-width

The border width can be set in pixels or using keywords:

div {
    border-style: solid;
    border-width: 3px;         /* Using pixels */
}

/* Using keywords */
div { border-width: thin; }   /* ~1px */
div { border-width: medium; } /* ~3px */
div { border-width: thick; }  /* ~5px */

border-color

The border color accepts any valid CSS color value — color names, HEX, RGB, or HSL.

div {
    border-style: solid;
    border-width: 2px;
    border-color: #e74c3c;  /* Red using HEX */
}

Border Shorthand

All three border properties can be combined into one line using the shorthand border property. The order is: width, style, color.

div {
    border: 2px solid #333;
}

This is the most common way to write borders in real CSS code.

Individual Sides

Borders can be applied to specific sides only — top, right, bottom, or left — using individual side properties.

div {
    border-top: 4px solid blue;
    border-bottom: 2px dashed red;
    border-left: 1px dotted gray;
    /* No right border */
}

This is useful for creating elements like underlined headings, left-accent bars, or bottom-only dividers.

Practical Example — Underline Style Heading

h2 {
    border-bottom: 3px solid #2980b9;
    padding-bottom: 8px;
}

border-radius — Rounded Corners

The border-radius property rounds the corners of an element's border. It is widely used for buttons, cards, profile pictures, and modern UI designs.

/* Slightly rounded corners */
.card {
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Fully rounded — creates a pill/capsule shape */
.button {
    border: 2px solid #27ae60;
    border-radius: 25px;
    padding: 10px 24px;
}

/* Perfect circle */
.avatar {
    border: 3px solid white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

Complete Border Example

.info-box {
    border: 2px solid #3498db;
    border-radius: 10px;
    border-left: 6px solid #2980b9;  /* Accent left border */
    padding: 15px;
    background-color: #eaf4fb;
}

This creates a card-style box with a blue left accent bar — a very common pattern in documentation and educational websites.

Summary

CSS borders require at least border-style to be visible. The shorthand border: width style color is the most efficient way to write borders. Individual sides can be controlled separately for more creative designs. The border-radius property adds rounded corners, which is essential in modern web UI design.