CSS Borders & Rounded Corners

Borders, rounded corners, circles, pills and outlines.

Lesson 8 of 49Beginner12 min read

Borders draw lines around elements, and border-radius rounds their corners. Together they turn plain boxes into buttons, cards, profile pictures, tags and badges, which covers most of the shapes you see on modern websites.

Borders are also a practical tool while you learn. Adding a temporary border: 1px solid red to an element is one of the quickest ways to see exactly how big it is and where it sits, which makes layout problems much easier to understand.

The three parts of a CSS border

Every border has a width, a style and a colour. You usually write all three in one shorthand:

CSS
border: 2px solid #15161b;

The style is required. Without it, no border appears, even if you set a width and colour. Styles include solid, dashed, dotted, double and none.

If you leave out the colour, the border uses the element's text colour. That can be handy: a button's border automatically matches its text.

Styling one side at a time

CSS
border-bottom: 3px solid tomato;
border-left: 6px solid #17a865;

Single-side borders are useful for underlines, highlighted quotes, active tabs and dividers between list items. You can also set the parts separately, for example border-top-color, when you only want to change one detail.

Rounded corners with border-radius

  • border-radius: 12px rounds all four corners.
  • border-radius: 50% on a square makes a circle.
  • border-radius: 999px on a wide box makes a pill shape.
  • border-radius: 20px 0 rounds the top-left and bottom-right corners by 20px and leaves the others square.

border-radius works even without a border. It rounds the background and clips a background image to the curved shape.

Outline vs border

outline looks like a border but doesn't take up space, so it never changes the layout. Browsers use outlines for keyboard focus rings. Never remove focus outlines without replacing them with another clear style (see Accessibility).

Borders and the box model

A border sits between an element's padding and its margin, so it adds to the element's size. A 200px-wide box with a 4px border is 208 pixels wide on screen, unless you use box-sizing: border-box, which keeps the total at 200px by fitting the border inside the width. Thick borders on hover can also make the layout jump, because the box suddenly grows. Two easy fixes are to give the element a transparent border of the same width from the start and change only its colour on hover, or to use outline or box-shadow, which don't take up space.

Border images and gradient borders

border-image draws a border from an image or gradient instead of a solid colour, for example border-image: linear-gradient(90deg, #f97316, #db2777) 1;. It doesn't work together with border-radius, so for rounded gradient borders designers often use two backgrounds instead: a solid inner background clipped to the padding box and a gradient clipped to the border box.

CSS Borders Syntax

Border properties

border: width style color;
border-top: 1px dashed gray;
border-radius: 12px;
outline: 3px solid blue;

CSS Borders Summary

  • A border needs a width, a style and a colour; the style is required.
  • Use border-top, border-left and the other sides to style one edge.
  • border-radius rounds corners; 50% on a square makes a circle.
  • outline doesn't take up space and is used for focus rings.
  • Borders add to an element's size unless you use box-sizing: border-box.

CSS Borders Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Border styles

.b { padding: 8px 12px; margin: 8px 0; font-family: monospace; }

.solid  { border: 3px solid #4467ff; }
.dashed { border: 3px dashed #f0592b; }
.dotted { border: 3px dotted #17a865; }
.double { border: 6px double #7c3aed; }
.side   { border-left: 6px solid #f2b705; background: #fff8e1; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 3 to 6The shorthand: width, style, colour.
  2. Line 6double needs a bigger width to show two lines.
  3. Line 7A single-side border, a classic "callout" style.
Example 2

Rounded shapes

.card {
  padding: 16px;
  border: 2px solid #15161b;
  border-radius: 16px;
  margin-bottom: 10px;
}

.avatar {
  border-radius: 50%;
  border: 3px solid #17a865;
}

.pill {
  display: inline-block;
  padding: 4px 14px;
  background: #e1e6ff;
  border-radius: 999px;
}

.leaf {
  width: 60px;
  height: 60px;
  margin-top: 10px;
  background: #17a865;
  border-radius: 0 60px;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4Soft corners on a card.
  2. Line 950% on a square image makes a circle.
  3. Line 17A huge radius on a wide element gives fully rounded ends.
  4. Line 25Two values: top-left and bottom-right are 0, the other corners are 60px. It makes a leaf shape.

Common CSS Borders Mistakes

Forgetting the border style

Don't
.box { border: 2px red; }
Do
.box { border: 2px solid red; }

No style means none, so nothing appears.

Expecting a circle from a rectangle

Don't
.avatar { width: 120px; height: 80px; border-radius: 50%; }
/* makes an oval */
Do
.avatar { width: 100px; height: 100px; border-radius: 50%; }

50% radius only makes a circle when width and height are equal.

CSS Borders in Real Projects

Where you've seen these

Round profile pictures on social networks, pill-shaped tags on blog posts, cards with soft corners, the thick left border on quotes and alerts: all of these are borders and border-radius.

CSS Borders Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Give the box a 2px solid black border and 10px rounded corners.

.box {
  border: 2px  black;
  : 10px;
}
Multiple choiceeasy

How do you make a square image into a circle?

Multiple choicemedium

What's the main difference between outline and border?

Fix the bugmedium

The quote should have a 5px solid green left border and the tag should be a pill shape. Fix the CSS.

.quote {
  border-left: 5px green;
  padding-left: 12px;
}

.tag {
  background: #ffd23f;
  padding: 2px 10px;
  border-radius: 2;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Quote has a 5px solid left border
  • Border is green
  • Tag is pill-shaped

CSS Borders Quiz

3 questions to check what you learned.

  1. Which border style is a series of dashes?

    • dotted
    • lined
    • broken
    • dashed

  2. Which property rounds only the top-left corner?

    • border-top-radius
    • radius-top-left
    • border-top-left-radius
    • border-radius-left

  3. border: 4px dashed; with no colour will use…

    • black always
    • transparent
    • Nothing, because it's invalid
    • the element's text colour (currentColor)

CSS Borders Challenge

Build a badge set

Style the three elements:

  1. .btn: a 2px solid #15161b border and 12px radius
  2. .avatar: a circle (border-radius: 50%) with a 3px solid #f0592b border
  3. .chip: a pill with a 1px dashed #4467ff border
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Button border is 2px solid
  • Button radius is 12px
  • Avatar is a circle
  • Avatar border is orange 3px
  • Chip has a dashed blue border
  • Chip is a pill

Related CSS topics

14Box ModelEvery element is a box. Learn how its size really works.47Shadows & GradientsDepth with box-shadow and colour blends with linear and radial gradients.07BackgroundsBackground colours, images, cover/contain, positioning and layers.
Esc
↑↓ to navigateEnter to open