CSS Rounded Corners

The border-radius Shorthand

border-radius takes one value to round all four corners equally, or up to four values for top-left/top-right/bottom-right/bottom-left individually, following clockwise order starting from the top-left.

Example: The border-radius Shorthand

<style>
.all {
  border-radius: 12px;
  background: steelblue;
  color: white;
  padding: 12px;
  display: inline-block;
}
.four {
  border-radius: 4px 8px 12px 16px;
  background: seagreen;
  color: white;
  padding: 12px;
  display: inline-block;
}
</style>
<div class="all">All corners equal</div>
<div class="four">Four different corners</div>

Making Circles and Pills

Setting border-radius to 50% on a square element (equal width and height) produces a perfect circle, since each corner's radius becomes exactly half the element's size.

On a rectangular button, border-radius: 999px (or any value larger than half the height) produces the common pill shape by capping visually at a full semicircle on each end.

Example: Making Circles and Pills

<style>
.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: steelblue;
}
.pill {
  padding: 10px 20px;
  border-radius: 999px;
  background: seagreen;
  color: white;
  display: inline-block;
}
</style>
<div class="circle"></div>
<div class="pill">Pill button</div>

Elliptical Corners

border-radius accepts two values per corner separated by a slash — horizontal-radius / vertical-radius — producing an elliptical rather than perfectly circular corner curve, useful for stylized card or blob shapes.

Example: Elliptical Corners

<style>
.box {
  width: 150px;
  height: 80px;
  border-radius: 50% / 20%;
  background: steelblue;
}
</style>
<div class="box">Elliptical corners</div>

Per-Corner Longhand Properties

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius let you round just one or two specific corners, common for tab-shaped elements or speech-bubble-style callouts.

Example: Per-Corner Longhand Properties

<style>
.tab {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="tab">Only the top corners are rounded</div>

Rounded Corners and overflow

border-radius alone doesn't clip an element's content or background image to the rounded shape — a child image or background that's larger than the rounded box will still show square corners poking out unless overflow: hidden is also set on the rounded element.

Example: Rounded Corners and overflow

<style>
.card {
  border-radius: 12px;
  overflow: hidden;
}
</style>
<div class="card">
  <img src="https://placehold.co/200x150" alt="Clipped to the card's rounded corners">
</div>