EN

CSS・More control over the look

Round the corners for a softer look

Just rounding those square corners a little makes the impression far softer. Use border-radius to make rounded corners and perfect circles.

Round the corners of a square part just a little. That alone softens a stiff impression and gives it a much more modern look. When buttons and cards look gentle, it’s usually thanks to this corner roundness. The tool for it is border-radius.

Let’s write one

.card {
  border: 2px solid teal;
  border-radius: 12px;
}

Just add one line, border-radius: 12px;, to a border. The corners of the square frame round off softly. Change the number to 4px or 20px and the degree of roundness changes too. Smaller for a crisp look, larger for a gentle one.

Let’s line up how the corners change for each number.

The bigger the number, the rounder the corners. Put in a number that’s too big, like 999px, and both ends become perfect half-circles — a pill shape.

Make the number big, and it becomes a full circle

Turn the roundness way up — set it to 50% and, surprisingly, it becomes a full circle. This is a common trick for round icons and profile photos.

.avatar {
  width: 80px;
  border-radius: 50%;
}

Set a square part to border-radius: 50%; and it turns into a clean circle. The moment a square becomes round is like a little bit of CSS magic, and it’s the spot where you feel “it changed!” the most.

Let’s see how the same square changes with 50%.

Even the same square, set to 50%, loses all its corners and becomes a full circle. Matching width and height is the trick to a clean circle.

Button-like: fully rounded corners + a “you can click” cue

Turn the corner roundness way up and a square button becomes a pill (capsule) shape. Add cursor: pointer; here and the cursor turns into a pointing hand when the mouse is over it, adding one more cue that says “you can press this.”

.btn {
  border-radius: 999px;
  cursor: pointer;
}

Specify a number that’s reliably too big, like 999px, and any size of part gets perfect half-circles at both ends, finishing as a pill shape.

Give each corner a different roundness

border-radius can actually set each of the four corners separately. Line up four numbers and they apply in the order top-left → top-right → bottom-right → bottom-left.

.tab {
  border-radius: 12px 12px 0 0;
}

Only the top two corners round, the bottom stays square — you can make shapes like a sticky note, a tab, or a speech bubble. Remember: one number rounds all four corners the same, four numbers let you change each corner.

Let’s see how the shape changes when you change the order of the numbers.

Depending on how you order the numbers, you can make a tab round only at the top, or a shape round only on the diagonal. They apply in the order top-left → top-right → bottom-right → bottom-left.

Summary of this lesson

  1. Corner roundness is border-radius
  2. The bigger the number, the rounder; 50% makes a full circle
  3. Around 8px–16px looks elegant for parts
  4. border-radius: 999px; for a pill shape, cursor: pointer; for a “you can press this” cue

Try it: round a card, a photo, and a button

Give .card rounded corners, Shima’s photo a circle, and the “Send” button a pill shape. Add a new class="btn" to the button.

<button type="submit" class="btn">Send</button>
.card {
  border: 1px solid #e9e3d9;
  border-radius: 28px;
}
figure img {
  border-radius: 50%;
}
.btn {
  border-radius: 999px;
  cursor: pointer;
}

.card turns a square box into a softly rounded card, Shima’s photo turns a square image into a clean circle, and the button becomes a pill shape with half-circles on each side.

Browser view. The corners of a white card are rounded, Shima’s photo is a full circle, and the “Send” button is a pill shape rounded on both sides
Just by rounding the corners, the whole page takes on a much softer impression.

Once the corners are round, one last touch — let’s add a shadow to make the card float gently.

FAQ

Why does the roundness look smaller than the number I set with border-radius?
Because even if you specify a number larger than the element's height, it won't get any rounder — it hits a ceiling. To make a capsule shape, a number safely larger than half the height (for example 999px) is plenty.
Can I give each corner a different roundness?
Yes. Line up four numbers like border-radius: 12px 12px 0 0; in the order top-left, top-right, bottom-right, bottom-left, and you can make a tab-like shape where only the top corners are round and the bottom stays square.
What if border-radius: 50% doesn't make a circle?
Unless the element is a square (with equal width and height), you get an ellipse instead of a circle. For a clean circle like a profile photo, first set width and height to the same value.