CSS Tutorial
CSS Rounded Corners
border-radius rounds corners. One value, four values, or a full ellipse for pills and circles.
Round the box, not the text
border-radius clips the corners of the border box. Backgrounds and borders follow the curve. The text inside still sits on straight lines. You do not need a round image file to get a round card.
The property works with or without a visible border. A white card on sky paper still shows the curve because the fill stops at the radius.
| Value | Result |
|---|---|
border-radius: 0.75rem; | Same curve on all four corners |
0.75rem 0 0.75rem 0 | Top-left, top-right, bottom-right, bottom-left |
A large radius such as 999px | A pill, as long as height is smaller than the diameter |
50% on a square | A circle |
50% on a rectangle | A stadium / ellipse, not a circle |
One value
Start with a single length. 0.75rem to 1.1rem is the Harbor studio card. Too large on a wide panel looks like a lozenge. Too small looks like a sharp box with a nick.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.card {
background: #fff;
border: 1px solid #7dd3fc;
border-radius: 1rem;
padding: 1.1rem 1.2rem;
max-width: 22rem;
}
</style>
<h1>Harbor studio</h1>
<article class="card">
<h2>Tide chart</h2>
<p>Open 8–16. Harbor Lane 12.</p>
</article>Click Try it in CSS under the example. That opens /css/try. Nudge1rem to 0.25rem and to 2.5rem to feel the range.
Four corners
Four values run clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Two values set top-left + bottom-right, then top-right + bottom-left. You can also write longhands such asborder-top-left-radius when only one corner should change.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #e0f2fe;
color: #0c4a6e;
}
.ticket {
background: #fff;
padding: 1rem 1.2rem;
max-width: 18rem;
border-radius: 1.25rem 0.25rem 1.25rem 0.25rem;
border: 1px solid #0284c7;
}
</style>
<h1>Harbor studio</h1>
<p class="ticket">Visitor pass — not a rectangle, not a circle.</p>Pills and circles
A pill is a rectangle with a radius larger than half its height. 999px (or a hugerem) is a common trick: the browser caps the curve at a semicircle, so the ends stay round if the button grows.
A circle needs a square box — equal width and height — and border-radius: 50%. Percentages are relative to the box, so a wide rectangle becomes a capsule, not a circle.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
background: #0d9488;
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
}
.pill {
background: #0284c7;
color: #fff;
text-decoration: none;
padding: 0.5rem 1.15rem;
border-radius: 999px;
}
</style>
<h1>Harbor studio</h1>
<div class="row">
<div class="avatar">HS</div>
<a class="pill" href="#">Book a desk</a>
</div>Overflow follows the radius. An image inside a circle needs overflow: hidden on the round wrapper, or the photo’s square corners will stick out.
Ellipses with a slash
One list of radii before a slash sets the horizontal curve. The list after the slash sets the vertical curve. border-radius: 2rem / 1rem; is a squat ellipse on every corner. You rarely need this on a first card. It is how some speech-bubble and leaf shapes start.
Next up: fills that are not a flat color. Gradients paint the same rounded box without an image file.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Biology
A pill for “book”
border-radius rounds corners. 12px is a card. 999px is a pill (radius larger than half the height). 50% on a square is a circle.
Radius does not change layout size. It clips the paint of background and border.
Example
<style>
button { border-radius: 999px; background: #9f1239; color: #fff; border: 0; padding: 0.4rem 1rem; }
</style>
<button type="button">Book a slot</button>Maths
A circular mark
Equal width and height plus 50% radius is a disc. The letter inside is centred with line-height matching height in this cheap trick.
Example
<style>
.dot { width: 40px; height: 40px; border-radius: 50%; background: #4338ca; color: #fff; text-align: center; line-height: 40px; }
</style>
<div class="dot">π</div>