CSS Borders

Borders are the visible lines that wrap around an element's edges, and they're one of the simplest ways to give something visual structure, like a card, a button, or a table cell. A CSS border needs three things to actually show up: a style (solid, dashed, dotted), a width, and a color. You can set all three individually, use the shorthand border property to set them together, or even round the corners off entirely with border-radius. Borders show up all over a real site like cookiescursor.com, from subtle card outlines to bold, rounded buttons.

In this page:

border-style
border-width and border-color
Shorthand border Property
border-radius
Individual Side Borders

border-style

border-style sets the line pattern of a border, like solid, dashed, or dotted. Without a style set, a border won't render even if width and color are set. A frequent beginner mistake is setting border-width and border-color but forgetting border-style, resulting in no visible border at all.

Note: solid is by far the most common border style for everyday UI elements like cards and buttons.

Warning: border-style: none (the default) means no border shows, regardless of what width or color you've set elsewhere.

Example: border-style

css

<style>
.a { border-width: 4px; border-color: red; }
.b { border-width: 4px; border-color: red; border-style: solid; }
</style>
<div class="a">No border-style: invisible</div>
<div class="b">border-style: solid, now visible</div>

border-width and border-color

border-width controls how thick a border is, and border-color sets its color. Together with border-style, these three properties fully describe a visible border. Both accept the same color formats as any other CSS color property, including hex, RGB, and named colors.

Note: Keep border-width small (1px to 2px) for subtle UI outlines, thicker borders draw a lot more visual attention.

Warning: border-color accepts any valid CSS color, but if it's left unset, most browsers default to the element's own text color.

Example: border-width and border-color

css

<style>
.box {
  border-style: solid;
  border-width: 3px;
  border-color: navy;
}
</style>
<div class="box">Width and color together</div>

Shorthand border Property

The border shorthand lets you set width, style, and color together in a single declaration, in that order, instead of writing three separate properties. If you need different values per side, you still have to fall back to the individual properties instead of the shorthand.

Note: The shorthand order (width, style, color) is easy to remember since it goes from 'how thick' to 'what pattern' to 'what color'.

Warning: Leaving out border-style in the shorthand (or anywhere) still results in no visible border at all.

Example: Shorthand border Property

css

<style>
.box {
  border: 3px solid navy;
}
</style>
<div class="box">Width, style, and color in one line</div>

border-radius

border-radius rounds off an element's corners, from a slight curve to a fully circular shape when set high enough relative to the element's size. Setting all four corners to 50% on a square element is the classic technique for creating a perfect circle.

Note: A small border-radius, like 6px to 10px, is a common, subtle way to make cards and buttons feel a little softer.

Warning: Setting border-radius to 50% on a square element turns it into a perfect circle, which is sometimes surprising if that wasn't the goal.

Example: border-radius

css

<style>
.box {
  width: 80px;
  height: 80px;
  border: 2px solid black;
  border-radius: 50%;
}
</style>
<div class="box"></div>

Individual Side Borders

Instead of styling all four sides at once, properties like border-top, border-right, border-bottom, and border-left let you style just one side of an element. This is especially useful for creating tab-like designs or highlighting a single edge without affecting the rest of the box.

Note: A single colored border-left is a popular, understated way to mark a callout or highlighted block of text.

Warning: Individual side borders don't automatically affect the other sides, if you only set border-bottom, the other three sides stay unstyled.

Example: Individual Side Borders

css

<style>
.box {
  border-left: 4px solid blue;
}
</style>
<div class="box">Only the left side is styled</div>

Common Mistakes

Setting border-color without also setting border-style, in which case no border shows up at all.
Forgetting that border-radius needs a length value, like 8px, not just a bare number.
Using four different individual side properties when the shorthand border property would be simpler.

Chapter Summary

A visible border needs a style, width, and color to actually appear.
The border shorthand property combines style, width, and color into a single declaration.
border-radius rounds an element's corners, and each side can also be styled individually.

Browser Support

All standard CSS border properties covered here are supported by every modern browser.

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Clip Next Lesson → CSS Border Style