CSS Borders: Style, Width, Color and Shorthand

CSS borders draw a line around an element. Learn every border-style value, how to style single sides, the border shorthand and border-radius for rounded cards.

What makes up a CSS border?

You met borders briefly in the box model lesson. Now let's look at them properly. A border is the frame around the padding of a box. Every border has three parts:

• border-width: how thick the line is, like 2px or 0.25rem. You can also use the keywords thin, medium and thick.
• border-style: what the line looks like, for example solid or dashed.
• border-color: the color of the line. If you leave it out, the border uses the element's text color (currentColor).

The most important rule: a border needs a style to appear. The default style is none, so border-width: 3px; on its own shows nothing at all.

<p class="box">This paragraph has a simple border.</p>

.box {
  border-width: 3px;
  border-style: solid;
  border-color: #2563eb;
  padding: 12px;
}

You will see the paragraph inside a blue, 3-pixel solid frame, with 12px of space between the text and the frame.

All border-style values

CSS has ten values for border-style. Here is what each one does:

Value	What you see
none	No border (the default).
hidden	No border. Same as none, except in tables with collapsed borders, where it wins over other borders.
solid	One plain, continuous line. The most common choice.
dashed	A line of short dashes.
dotted	A line of round dots.
double	Two parallel lines. Needs at least 3px width to show both lines.
groove	Looks carved into the page.
ridge	Looks raised out of the page (the opposite of groove).
inset	Makes the whole box look pressed in.
outset	Makes the whole box look pushed out.

Try them all at once with this small demo:

<div class="styles">
  <p style="border-style: solid">solid</p>
  <p style="border-style: dashed">dashed</p>
  <p style="border-style: dotted">dotted</p>
  <p style="border-style: double">double</p>
  <p style="border-style: groove">groove</p>
  <p style="border-style: ridge">ridge</p>
  <p style="border-style: inset">inset</p>
  <p style="border-style: outset">outset</p>
</div>

.styles p {
  border-width: 6px;
  border-color: #94a3b8;
  padding: 10px;
  margin: 8px 0;
}

Each paragraph shows its own style name inside the matching border. The 3D styles (groove, ridge, inset, outset) look best with a wide border and a medium gray color. In real projects you will mostly use solid, dashed and dotted.

Borders on individual sides

You don't have to put a border on all four sides. Each side has its own properties: border-top, border-right, border-bottom and border-left. You can go even more specific, like border-left-color or border-bottom-width.

The border-style, border-width and border-color properties also accept 1 to 4 values, clockwise from the top, just like padding: border-width: 1px 0 4px 0; means top 1px, right 0, bottom 4px, left 0.

<blockquote class="quote">Simple code is easier to fix than clever code.</blockquote>
<h2 class="section-title">Latest posts</h2>

.quote {
  border-left: 5px solid #f59e0b;
  padding: 8px 16px;
  background: #fffbeb;
}

.section-title {
  border-bottom: 2px dashed #cbd5e1;
  padding-bottom: 6px;
}

The quote gets a thick orange stripe on its left side only, a popular way to show a quotation. The heading gets a dashed line underneath it, like an underline that spans the full width.

The border shorthand

Writing three properties every time is slow. The border shorthand sets width, style and color in one line, in any order: border: 2px solid #333;. The side shorthands work the same way: border-top: 1px dotted red;.

A clever trick: set a border on all sides, then remove one side.

.tab {
  border: 1px solid #cbd5e1;
  border-bottom: none;
}

This looks like a browser tab: a frame on top and both sides, open at the bottom.

Common mistake: Writing border: 2px #333; without a style. Because the style is missing, it falls back to none and no border appears. Always include solid, dashed or another style.

border-radius in detail

border-radius rounds the corners of a box. It works even without a visible border, because it also clips the background.

• border-radius: 8px; rounds all four corners the same.
• Four values go clockwise from the top-left: border-radius: 16px 16px 0 0; rounds only the top corners.
• Single corners: border-top-left-radius, border-bottom-right-radius and so on.
• border-radius: 50%; on a square makes a circle. On a rectangle it makes an oval.
• A very large value like 999px makes a "pill" shape with fully round ends.
• A slash creates elliptical corners: border-radius: 40px / 20px; (horizontal radius / vertical radius).

Borders on cards and tables

Here is a realistic product card that uses most of what you've learned:

<article class="card">
  <h3>Wireless Headphones</h3>
  <p>40 hours of battery and soft ear cushions.</p>
  <span class="badge">New</span>
</article>

.card {
  max-width: 280px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-top: 4px solid #7c3aed;
  border-radius: 12px;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #7c3aed;
  border-radius: 999px;
  color: #7c3aed;
  font-size: 0.8rem;
}

You will see a white card with a soft gray frame, a thick purple line on top and rounded corners. Inside, the "New" badge is a small purple pill with an outline.

For tables, add borders to the cells and remember border-collapse: collapse; on the table so neighboring cell borders merge into single lines (the Styling Tables lesson covers this). Often only a bottom border on each row looks cleaner than a full grid:

table { border-collapse: collapse; width: 100%; }
td, th { padding: 10px; border-bottom: 1px solid #e2e8f0; text-align: left; }

Tip: For a light, modern look, use thin borders (1px) in a color only a bit darker than the background. Strong black borders often look heavy.

Practice exercise

Build a "pricing card" with a title, a price and a button. Give the card a 1px light border and 12px rounded corners. Give the "most popular" card a 2px colored border instead, and make the button a pill shape with a dashed border that turns solid on hover.

Hint: change only border-style inside a :hover rule, so the width and color stay the same.

Key takeaways

• A border has width, style and color, and it only appears when the style is not none.
• There are ten border-style values; solid, dashed and dotted are the everyday ones.
• Use border-top, border-left and friends to style single sides.
• The border shorthand sets width, style and color in one line.
• border-radius rounds corners: 50% for circles, 999px for pills.