CSS Rounded Corners
In this page:
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>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: