Loading...

CSS Borders

You can paint fills, photos, gradients, and soft fades. Next skill: draw the edge of the box. A border is the line that frames an element — cards, buttons, inputs, and panels all lean on it.

What is a border?

A CSS border sits on the edge of the element’s box. It has three ingredients: width (how thick), style (how it looks — solid, dashed, and friends), and color. Miss the style, and many browsers draw nothing useful even if you set a width.

The three parts

Think of every border as a small recipe: thickness + look + paint.

Longhand width, style, color

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Why style matters

border-width alone is not enough. Without a border-style other than the initial none, you usually will not see a line. Start with solid until you need a fancier look.

Shorthand: write it in one line

The border shorthand packs width, style, and color together. A common everyday order is width → style → color.

Border shorthand

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

Common border styles

Style is the personality of the line. Memorize a small everyday set first.

📊 Common border-style values

Keyword Look Everyday use
solid Continuous line Cards, buttons, form fields
dashed Short dashes Placeholders, “drop zone” hints
dotted Dots Soft dividers, subtle frames
double Two parallel lines Decorative emphasis (use sparingly)
none No border drawn Reset / remove an inherited edge
hidden Like none for collapsing table borders Tables later — know the name exists

Try a few styles side by side

Same width and color; only the style changes.

Solid, dashed, dotted, double

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

One side at a time

You can style top, right, bottom, and left separately — useful for underlines, left accent bars, or asymmetric cards.

Per-side borders

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

Shorthand per side

border-left: 4px solid #0f766e is the everyday way to set one edge without touching the others.

Everyday card habit

A light border plus padding and a soft fill reads as a clear card without shouting.

Simple bordered card

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* rounding is the next lesson — keep edges square here */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

Removing a border

To clear a border, prefer border: none (or border-style: none). Setting only border-color: transparent can still leave width/style taking space in some layouts — none is the clean reset.

Reset with border none

css
CSS Code 
.plain {
border: none;
}

Try it yourself

  1. Build a card with longhand border-width, border-style: solid, and a teal border-color.
  2. Rewrite the same look with border: 2px solid #0f766e.
  3. Make four boxes: solid, dashed, dotted, and double at the same thickness.
  4. Create a quote block with only a thick left border.
  5. Start from a bordered button, then remove the edge with border: none.

Common mistakes

  • Setting width and color but forgetting border-style (so nothing shows)
  • Mixing up border (the drawn edge) with margin (outer gap) — different tools
  • Expecting rounded corners from border alone — that is border-radius (next lesson)
  • Using a loud different color on every side “just because”
  • Leaving a thick transparent border when you meant border: none

Summary

  • A border needs width, style, and color
  • border: 2px solid #0f766e is the everyday shorthand
  • Learn solid, dashed, dotted, double, and none first
  • Style sides separately when the design asks for it
  • Reset cleanly with border: none
  • Keep corners square for now — rounding comes next

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
9
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial