Borders and radius · CSS

The border shorthand

HTML

<style>
  .b { padding: 10px; margin: 8px 0; font: 15px system-ui; }
</style>
<div class="b" style="border: 2px solid #5a48f5">solid</div>
<div class="b" style="border: 2px dashed #0aa9cf">dashed</div>
<div class="b" style="border: 3px dotted #e0663a">dotted</div>
<div class="b" style="border: 4px double #222">double</div>

border: width style colour. The style is the part people forget, and it's the one that matters most: its default is none, so border: 2px red draws nothing at all.

One side at a time

HTML

<style>
  .note { border-left: 4px solid #5a48f5; background: #f4f2ff; padding: 10px 14px; font: 15px system-ui; }
  .tab  { display: inline-block; border-bottom: 3px solid #0aa9cf; padding: 6px 2px; font: 15px system-ui; }
</style>
<p class="note">A left accent line: the classic callout box.</p>
<span class="tab">An underlined tab</span>

border-top, border-right, border-bottom and border-left take the same three values.

Rounded corners

HTML

<style>
  .row { display: flex; gap: 14px; align-items: center; font: 14px system-ui; }
  .row > div { display: grid; place-items: center; background: #5a48f5; color: white; }
  .soft   { width: 110px; height: 70px; border-radius: 12px; }
  .pill   { padding: 8px 18px; border-radius: 999px; }
  .circle { width: 70px; height: 70px; border-radius: 50%; }
  .leaf   { width: 70px; height: 70px; border-radius: 0 40px; }
</style>
<div class="row">
  <div class="soft">12px</div>
  <div class="pill">999px: a pill</div>
  <div class="circle">50%</div>
  <div class="leaf">0 40px</div>
</div>

A huge radius such as 999px turns any box into a pill, whatever its size.
50% on a square makes a circle, which is how avatars are drawn.
Several values go clockwise from the top-left corner, as with margin: 0 40px gives the top-left and bottom-right corners 0, and the other two 40px.

Round images

HTML

<style>
  .avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
            border: 3px solid white; box-shadow: 0 0 0 3px #5a48f5; }
</style>
<img class="avatar" src="https://picsum.photos/seed/face/200/300" alt="Profile picture">

The original picture isn't square. object-fit: cover crops it to fill the circle instead of squashing it.

Outline: a border that takes no space

HTML

<style>
  .row { display: flex; gap: 10px; font: 14px system-ui; }
  .row div { padding: 10px; background: #eef0ff; }
  .with-border  { border: 4px solid #e0663a; }
  .with-outline { outline: 4px solid #e0663a; outline-offset: 2px; }
</style>
<div class="row">
  <div>Plain</div>
  <div class="with-border">Border</div>
  <div>Plain</div>
  <div class="with-outline">Outline</div>
  <div>Plain</div>
</div>

A border is part of the box, so it makes the box bigger and pushes neighbours away. An outline is drawn on top and moves nothing, which is why browsers use outlines to show keyboard focus. outline-offset leaves a gap between the outline and the box.