The Complete CSS Rounded Corners Interactive Tutorial

Table of Contents

Rounded corners in CSS: the border-radius basics

Rounded corners in CSS are mostly about one property: border-radius. You apply it to an element, and its corners get curved instead of sharp. The greater the value, the rounder the corner.

A helpful mental model: border-radius rounds the element’s outer border edge, which means it affects the border shape and the background painting area, too.

.demo {
  border-radius: 18px;
}

.demo {
  border-radius: 999px;
}

.demo {
  border-radius: 0px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.demo {
  width: 320px;
  padding: 18px;
  border: 3px solid #111;
  background: #f2f2f2;
}

.demo strong {
  display: block;
  margin-bottom: 6px;
}


  
    Card
    This box has a border and a background, so rounding is easy to see.

Common units: px vs %

You’ll most often use px for “UI rounding” (like 6px, 12px, 16px). Percentages are more “shape-y”: 50% on a square gives a circle, and on a rectangle gives an oval.

.shape {
  border-radius: 12px;
}

.shape {
  border-radius: 50%;
}

.shape {
  border-radius: 20%;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.shape {
  width: 180px;
  height: 120px;
  border: 3px solid #111;
  background: #e9f5ff;
  display: grid;
  place-items: center;
  font-weight: 700;
}


  
    Shape

border-radius syntax: shorthand and per-corner control

The shorthand version can take one to four values. Think “top-left, top-right, bottom-right, bottom-left” when you give four values.

If you prefer being very explicit, you can use longhands like border-top-left-radius and friends.

.panel {
  border-radius: 18px;
}

.panel {
  border-radius: 18px 2px;
/* with two values, the first is top-left & bottom-right, the second is top-right & bottom-left */
}

.panel {
  border-radius: 18px 18px 2px 2px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.panel {
  width: 360px;
  padding: 16px;
  border: 3px solid #111;
  background: #fff7e8;
}

.panel p {
  margin: 0;
}


  
    
      Same element, different shorthand syntax. Click the snippets to switch rounding styles.

Per-corner longhands (top-left, top-right, bottom-right, bottom-left)

Longhands are great when you only want to change one corner without mentally parsing four values. They also make “top only” patterns super readable.

.badge {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.badge {
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.badge {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.badge {
  width: 360px;
  padding: 14px 16px;
  border: 3px solid #111;
  background: #eaffe6;
  font-weight: 700;
}


  
    Longhands make “only these corners” easy to read.

Rounded corners with borders: what actually gets rounded

When you add a border, it follows the same curve as the element’s rounded corner. That’s why border + border-radius is the classic “rounded card” combo.

The most common beginner bug is this: the container is rounded, but the thing inside isn’t clipped, so you still see sharp corners (especially with images and backgrounds). We’ll fix that later with overflow: hidden.

.card {
  border-radius: 16px;
  border: 3px solid #111;
}

.card {
  border-radius: 16px;
  border: 3px dashed #111;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  width: 380px;
  padding: 16px;
  background: #f6f6ff;
}

.card p {
  margin: 0;
}


  
    
      Borders follow the curve. Swap between solid and dashed to see the rounding clearly.

CSS rounded corners for buttons

Buttons usually look best with either a small radius (subtle rounding) or a “pill” radius (fully rounded ends). A pill is typically done with a very large radius, like 999px, so it stays rounded even when the button grows.

.button {
  border-radius: 10px;
}

.button {
  border-radius: 999px;
}

.button {
  border-radius: 999px;
  border-width: 3px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.button {
  appearance: none;
  border: 2px solid #111;
  background: #fff;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0px);
}

.button.primary {
  background: #111;
  color: #fff;
}

CSS rounded corners for divs and cards

Rounded corners are super common on “cards”: content blocks with padding, a background, and a border or shadow. The important part is to keep the snippet focused on the rounding itself.

.card {
  border-radius: 18px;
}

.card {
  border-radius: 18px 18px 6px 6px;
}

.card {
  border-radius: 6px 18px 6px 18px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  width: 410px;
  border: 3px solid #111;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 10px 0 0 #111;
}

.card h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.card p {
  margin: 0;
  line-height: 1.4;
}


  
    Rounded card
    
      Border radius shapes the card. Try the different corner patterns for different vibes.

Here, the card has a box-shadow. Learn more in the CSS Box Shadow Interactive Tutorial.

CSS rounded corners for images (and why overflow hidden matters)

You can round an image in two common ways:

Round the image itself with border-radius (simple and direct).
Round a container card and clip what’s inside with overflow: hidden. This is the usual approach for “image header cards”.

If you only round the container but forget the clipping, the image will keep its sharp corners and spill outside the rounded shape.

.hero img {
  border-radius: 18px;
}

.hero {
  border-radius: 18px;
  overflow: hidden;
}

.hero {
  border-radius: 18px;
  overflow: hidden;
}

.hero img {
  transform: scale(1.06);
}

.hero {
  border-radius: 18px;
  /* without overflow:hidden; the image overflows the card */
}
.hero img {
  transform: scale(1.06);
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.hero {
  width: 410px;
  border: 3px solid #111;
  background: #fff;
}

.hero img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.caption {
  padding: 12px 14px;
}

.caption strong {
  display: block;
  margin-bottom: 4px;
}


  
    
    
      Image card
      Rounded corners look “correct” when the image is clipped to the same radius.

Learn more about overflow: hidden; in the CSS Overflow Interactive Tutorial.

Rounded corners and backgrounds (including pseudo-element backgrounds)

Backgrounds are usually easy: if the element has background and border-radius, the background respects the rounded corners. Where it gets interesting is when you want:

a gradient “behind” the content,
a decorative layer that can be animated,
or a background that sits under the border.

A clean pattern is: put the background on a ::before pseudo-element, give it the same radius, and keep your content above it.

.panel {
  border-radius: 18px;
  background: linear-gradient(135deg, #e9f5ff, #fff7e8);
}

.panel {
  border-radius: 18px;
  position: relative;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #e9f5ff, #fff7e8);
  opacity: 0.9;
}

.panel {
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 24px;
  background: radial-gradient(circle at 30% 30%, #e9f5ff, transparent 55%),
    radial-gradient(circle at 70% 60%, #fff7e8, transparent 55%);
  opacity: 0.95;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.panel {
  width: 440px;
  border: 3px solid #111;
  padding: 16px;
}

.panel > * {
  position: relative;
}

.panel h4 {
  margin: 0 0 6px 0;
}

.panel p {
  margin: 0;
  line-height: 1.4;
}


  
    Background layers
    
      Try putting background directly on the element vs using ::before as a decorative layer.

Learn more about pseudo-elements in the CSS ::before and ::after Pseudo-Elements Interactive Tutorial.

CSS rounded corners on tables

HTML <table> elements can be tricky because of how borders and border-collapsing work. Two patterns tend to be reliable:

Wrap the table in a rounded container and clip it with overflow: hidden.
Use border-collapse: separate and apply rounding carefully (still often easier with a wrapper).

Pattern 1: rounded wrapper with overflow hidden

.table-wrap {
  border-radius: 16px;
  overflow: hidden;
}

.table-wrap {
  border-radius: 16px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

.table-wrap {
  border-radius: 24px;
  overflow: hidden;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.table-wrap {
  width: 520px;
  border: 3px solid #111;
  background: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid #111;
}

th {
  text-align: left;
  background: #f2f2f2;
}

tr:last-child td {
  border-bottom: none;
}


  
    
      
        
          Planet
          Nickname
          Vibe
        
      
      
        
          Earth
          Home
          Mostly cozy
        
        
          Mars
          The red one
          Dusty
        
        
          Saturn
          Ring boss
          Stylish

Planet	Nickname	Vibe
Earth	Home	Mostly cozy
Mars	The red one	Dusty
Saturn	Ring boss	Stylish

Pattern 2: border-collapse separate (when you need spacing)

If you want “gaps” between cells, use border-collapse: separate and border-spacing. In that case, rounding the outer wrapper is still the simplest way to get clean outer corners.

.table-wrap {
  border-radius: 16px;
  overflow: hidden;
}

table {
border-collapse: separate;
border-spacing: 0;
}

.table-wrap {
  border-radius: 16px;
  overflow: hidden;
}

table {
  border-collapse: separate;
  border-spacing: 8px;
}

.table-wrap {
  border-radius: 24px;
  overflow: hidden;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.table-wrap {
  width: 520px;
  border: 3px solid #111;
  background: #fff;
  padding: 10px;
}

table {
  width: 100%;
  font-size: 14px;
}

th,
td {
  padding: 10px 12px;
  border: 2px solid #111;
  background: #fff;
}

th {
  background: #f2f2f2;
  text-align: left;
}

Snack	Crunch	Rating
Chips	High	9/10
Carrots	Medium	7/10
Pickles	Surprise	8/10

Top-only corners and one-side corners

These are the everyday UI patterns:

Top only: great for headers, modals, and sheets.
One side: great for “attached” pills, side panels, and chat bubbles.

.box {
  border-radius: 16px 16px 0px 0px;
}

.box {
  border-radius: 0px 16px 16px 0px;
}

.box {
  border-radius: 16px 0px 0px 16px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.box {
  width: 410px;
  border: 3px solid #111;
  background: #eaffe6;
  padding: 16px;
  font-weight: 700;
}


  
    Top-only and one-side rounding are just shorthand patterns.

Rounded “blob” shapes with 8-value border-radius

Here’s the fun part: border-radius can take eight values using a slash. The four values before the slash are the horizontal radii, and the four values after the slash are the vertical radii. That’s how you get organic “blob” shapes.

Interactive blob playground

Move the sliders and watch the blob change. Each slider updates one value in the single border-radius declaration.

H1 (top-left) H2 (top-right) H3 (bottom-right) H4 (bottom-left) V1 (top-left) V2 (top-right) V3 (bottom-right) V4 (bottom-left)

.blob {
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 920px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.blob {
  width: 320px;
  aspect-ratio: 1 / 1;
  border: 3px solid #111;
  background: radial-gradient(circle at 30% 30%, #e9f5ff, #fff7e8);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.note {
  max-width: 520px;
  padding: 12px 14px;
  border: 2px dashed #111;
  border-radius: 14px;
  background: #fff;
}

.note p {
  margin: 0;
  line-height: 1.4;
}


  Blob
  
    
      Tip: percentages often feel more “organic” for blobs than pixels.

For a great blob generator, try the 9elements Fancy Border Radius tool, which gives you a visual interface for tweaking all eight values and exports clean CSS.

When blob radii are useful (and when they’re not)

Great for: decorative shapes, badges, avatars, playful UI highlights.
Less great for: containers that must align perfectly in a grid, or anything that needs very consistent spacing.

Troubleshooting: “rounded corners not working”

I set border-radius but nothing looks different: your element may be transparent and borderless, so there’s nothing to “see” rounded. Add a background or border.
My image still has sharp corners: either round the img itself, or round the container and add overflow: hidden.
My table corners won’t round: use a wrapper with border-radius + overflow: hidden (and keep border-collapse in mind).
My background layer ignores rounding: if it’s on a pseudo-element, give that pseudo-element the same radius (and often overflow: hidden on the parent).

Recap and quick patterns to remember

Default UI rounding: border-radius: 8px;
Pill buttons: border-radius: 999px;
Top-only: border-radius: 16px 16px 0 0;
One side: border-radius: 0 16px 16px 0;
Image cards: container radius + overflow: hidden
Blob mode: 8 values with a slash (and the 9elements generator when you want a shortcut).

Conclusion

Rounded corners are a fundamental part of modern UI design, and CSS gives you powerful tools to create them. Whether you want simple buttons, elegant cards, or wild blobs, mastering border-radius and its quirks will level up your CSS game.

Share:

Leave the first comment (Cancel Reply)

You must be logged in to post a comment.