Skip to content
Laviyx Learn

Try

CSS course menu

CSS Borders and border-radius: Styles, Rounded Corners and Circles

Learn CSS borders: border width, style and colour, the border shorthand, individual sides, rounded corners with border-radius, perfect circles and pills, and the difference between border and outline.

Beginner6 min readUpdated
On this page

Borders draw a line around an element's padding. Combined with border-radius, they shape buttons, cards, avatars and badges.

The border shorthand#

A border needs a width, a style and a colour:

CSS
.card { border: 2px solid #2f5fe0; }

The style is required: without it, no border appears, because the default style is none.

CSS
p { padding: 8px; border-width: 4px; border-color: #2f5fe0; }
HTML
<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>
Result

Individual sides#

Each side can be set separately:

CSS
.quote {
  border-left: 5px solid #8a3b12;
  padding-left: 12px;
}
.tab {
  border-bottom: 3px solid #2f5fe0;
  display: inline-block;
  padding-bottom: 4px;
}
HTML
<p class="quote">A left border is a classic way to mark a quotation or note.</p>
<span class="tab">Active tab</span>
Result

You can also set one aspect for all sides, such as border-color: red; or border-width: 1px 0; (top and bottom only).

Rounded corners: border-radius#

CSS
.b { display: inline-block; width: 90px; height: 70px; margin: 4px; background: #2f5fe0; }
HTML
<div class="b" style="border-radius: 4px"></div>
<div class="b" style="border-radius: 16px"></div>
<div class="b" style="border-radius: 16px 0 16px 0"></div>
<div class="b" style="border-radius: 50%"></div>
Result
  • One value rounds all corners.
  • Four values go clockwise from the top-left: top-left, top-right, bottom-right, bottom-left.
  • Percentages are relative to the box size, so 50% on a rectangle makes an ellipse.

border-radius works without a border too, rounding the background.

Circles and pills#

CSS
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: url("/lesson-assets/landscape-square.svg") center / cover;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #2f5fe0;
}
.pill {
  padding: 6px 16px;
  border-radius: 999px;
  background: #e8f0fa;
  color: #2c6cb6;
}
HTML
<div class="avatar"></div>
<p><span class="pill">Beginner</span></p>
Result
  • A square with border-radius: 50% is a circle.
  • A very large radius (999px) on a rectangle gives fully rounded ends: a pill.

Border or outline?#

outline looks like a border but behaves differently:

borderoutline
Takes up spaceYes, part of the box sizeNo, drawn outside without moving anything
Individual sidesYesNo, all sides at once
Follows border-radiusYesYes, in current browsers
Typical useDesignFocus indicators

Browsers show keyboard focus with an outline. If you restyle it, keep it clearly visible:

CSS
button:focus-visible {
  outline: 3px solid orange;
  outline-offset: 2px;
}

Practice#

Practice exercise

Make a card with a 1px light grey border and 12px rounded corners, and inside it a circular "AR" initials badge (48px, white text on a blue background, text centered).

Show solution
CSS
.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  max-width: 260px;
}
.initials {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2f5fe0;
  color: white;
  display: grid;
  place-items: center;
  font-weight: bold;
}
HTML
<div class="card">
  <div class="initials">AR</div>
  <p>Asha Rao, Web Developer</p>
</div>
Result

display: grid; place-items: center; centers the text; you will learn it in Centering Anything.

Key takeaway#

Finished this lesson?

Related lessons

CSSThe CSS Box Model: Content, Padding, Border and MarginUnderstand the CSS box model with visual examples: content, padding, border and margin, how they add up to an element's size, how to inspect boxes in developer tools, and margin collapsing.Beginner5 min readCSSCSS Shadows, Opacity and Filters: box-shadow, text-shadow, filter and backdrop-filterAdd depth and visual effects with CSS: box-shadow (offsets, blur, spread, inset, layered shadows), text-shadow, opacity, filter functions such as blur, grayscale and brightness, drop-shadow, and frosted glass with backdrop-filter.Intermediate5 min readCSSCSS Margin and Padding: Shorthand, auto Centering and Negative MarginsLearn CSS margin and padding: individual sides, the one-to-four value shorthand, centering blocks with margin auto, negative margins, logical properties such as margin-inline, and the gap property for spacing in Flexbox and Grid.Beginner5 min read