CSS — Borders

The three border properties

Every border needs three answers: how thick, what shape, what color:

.box {
    border-width: 2px;
    border-style: solid;
    border-color: teal;
}

What the browser displays

(A teal 2px rectangle around the element.)

border-style is required — without it no border appears, because the default style is none:

.broken { border-width: 5px; }                    /* invisible! */
.works  { border-width: 5px; border-style: dashed; }

Border styles

.solid   { border-style: solid; }    /* ─────── */
.dotted  { border-style: dotted; }   /* · · · · */
.dashed  { border-style: dashed; }   /* – – – – */
.double  { border-style: double; }   /* ═══════ */
.groove  { border-style: groove; }   /* carved in  */
.ridge   { border-style: ridge; }    /* raised out */
.inset   { border-style: inset; }
.outset  { border-style: outset; }
.none    { border-style: none; }
.hidden  { border-style: hidden; }

In practice you'll use solid, dashed, dotted — plus none to remove borders.

The shorthand you'll actually write

.box {
    border: 2px solid teal;      /* width style color, any order */
}

One line replaces three. This is how borders appear in real codebases.

Per-side shorthands:

h1        { border-bottom: 3px solid gold; }     /* classic underline accent */
.card     { border-left: 4px solid crimson; }    /* quote-style accent bar   */
footer    { border-top: 1px solid #ddd; }        /* subtle divider           */

Single-side styling is everywhere in professional UIs — accent bars, active-tab indicators, input focus rings' cousins.

Per-side longhands (when needed)

Each side has full controls:

.box {
    border-top-color: red;
    border-bottom-style: dotted;
    border-left-width: 6px;
}

Rarely written by hand; know they exist for surgical tweaks.

Removing borders

button {
    border: none;       /* or border: 0 */
}

Buttons ship with browser-default borders; custom-styled buttons almost always start by removing them.

Rounded corners: border-radius

Technically "corners", practically inseparable from borders:

.avatar { border-radius: 50%; }          /* perfect circle */
.card   { border-radius: 8px; }          /* soft modern corners */
.pill   { border-radius: 999px; }        /* fully-rounded pill button */

Individual corners:

.tab {
    border-radius: 10px 10px 0 0;    /* top-left top-right bottom-right bottom-left */
}

Rounded corners are the single most recognizable trait of modern UI — flat sharp rectangles read as dated instantly.

Borders + layout behavior

Borders add to an element's rendered size:

/* A div that is 200px wide becomes 204px with 2px borders */
.wide { width: 200px; border: 2px solid black; }

The box-model lesson covers taming this with box-sizing: border-box. For now: unexpected extra width? Check your borders.

Putting it together: a card

.profile-card {
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 20px;
}
.profile-card img {
    border-radius: 50%;
    border: 3px solid #eee;
}

What the browser displays

(A softly rounded white card containing a circular avatar photo ringed with a light gray border — the standard profile widget seen across the web.)

Mini Practice

1. Give a heading a border-bottom: 3px solid accent in your brand color
2. Build .card: thin border + border-radius: 12px + padding
3. Make a circular avatar from any square image using border-radius: 50%
4. Create a pill-shaped button (border-radius: 999px) with only a left accent border removed… then try all four sides differently
5. Measure a bordered box vs its declared width — witness the box model

Next: margins →