border-radius is a CSS property for rounding the corners of elements. It is one of the most commonly used techniques in modern web design, for buttons, cards, avatars, and modal windows. Understanding the syntax, the difference between pixels and percentages, and techniques for creating circles, pills, and organic shapes helps you implement designs quickly without extra code. This article provides a complete overview of border-radius, common shapes, browser support, and practical tips.
To adjust corner rounding visually, use the border-radius generator on reChecker.
border-radius syntax
One value
Rounds all four corners equally:
border-radius: 12px;
border-radius: 50%;Two values
The first applies to the top-left and bottom-right corners; the second to the top-right and bottom-left corners:
border-radius: 12px 24px;
/* top-left + bottom-right: 12px, top-right + bottom-left: 24px */Three values
The first applies to the top-left corner, the second to the top-right and bottom-left corners, and the third to the bottom-right corner:
border-radius: 12px 24px 8px;Four values
Clockwise, starting from the top-left corner:
border-radius: 12px 24px 8px 16px;
/* top-left, top-right, bottom-right, bottom-left */Slash notation (elliptical corners)
The horizontal / vertical syntax sets horizontal and vertical radii for elliptical rounding:
border-radius: 50px / 25px;
/* горизонтальный радиус 50px, вертикальный 25px */You can combine this with multiple values:
border-radius: 50px 20px 50px 20px / 25px 10px 25px 10px;Pixels vs. percentages
Pixels (px)
A fixed value that does not depend on the element's size. Suitable for buttons and cards when you need a predictable radius.
.card {
border-radius: 8px;
}Percentages (%)
Relative to the element's dimensions. For a square, border-radius: 50% produces a circle (half the width = half the height = the radius). For a rectangle, 50% creates an ellipse or a pill, depending on its proportions.
.avatar {
width: 100px;
height: 100px;
border-radius: 50%; /* круг */
}
.pill {
width: 200px;
height: 40px;
border-radius: 50%; /* капсула/таблетка */
}Important: The percentage is calculated from the corresponding side (horizontal from the width, vertical from the height). On rectangles, the same percentages produce different pixel radii along each axis.
Common shapes
Circle
A square element + border-radius: 50%:
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
}Pill
A rectangle whose height is half its width + border-radius: 50% or a large px value:
.pill {
padding: 8px 24px;
border-radius: 9999px; /* или 50% */
}9999px is a practical “infinite” radius: the corners are always rounded into semicircles.
Blob (organic shape)
Combining different radii creates soft, organic shapes:
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}Changing the percentages produces different blob variations without SVG.
Rounding only some corners
.card-top {
border-radius: 12px 12px 0 0;
}
.card-bottom {
border-radius: 0 0 12px 12px;
}Asymmetric shapes
Combining different values for each corner lets you create unusual shapes, such as angled cards and wavy edges. Complex shapes often use clip-path or SVG, but for simple cases, border-radius is enough.
.asymmetric {
border-radius: 20px 5px 20px 5px;
}Browser support
border-radius is supported by all modern browsers (Chrome, Firefox, Safari, and Edge) without prefixes. Prefixes such as -webkit- and -moz- were used for very old versions (IE9 and earlier), but they are no longer needed.
Performance
border-radius is processed by the browser's compositing layer. It has little impact on performance. box-shadow combined with a large radius on animated elements can have a significant impact—in such cases, check performance in DevTools.
Responsive design
Fixed values
On small screens, a large radius can take up too much content space. Use clamp or media queries:
.card {
border-radius: clamp(8px, 2vw, 24px);
}Percentages
On responsive elements, percentages are recalculated when the size changes. A circle stays a circle, and a pill stays a pill.
The Border Radius tool on reChecker
The border-radius generator on reChecker lets you:
- Adjust the radius of each corner visually
- Set elliptical corners using slash notation
- See the result in real time
- Copy CSS with one click
It is useful for quickly choosing values and experimenting with blob shapes without manual calculations. When you change the values, the result updates instantly, so you can find a visually pleasing shape in a few clicks.
border-radius and other properties
Interaction with border
Rounding is applied to the outer edge of border. If border is thick, the inner corner may look sharper. With border: 0, rounding follows the edge of padding-box.
Interaction with box-shadow
The shadow follows the element's rounded shape. When you animate border-radius, the shadow changes shape as well, which can affect performance during frequent repaints.
Recommendations
- Consistent style — choose 1–2 radius values for your project (for example, 8px and 16px) and use them consistently
- Accessibility — pronounced rounding can affect readability; check contrast and the size of the clickable area
- overflow: hidden — with
border-radius, content is clipped to the rounded edge; if you have overflow issues, checkoverflow: hiddenon the parent - Images — for
imginside a container, setborder-radiusandoverflow: hiddenon the parent, or useobject-fit: coverfor correct clipping
FAQ
Why isn't border-radius working on an element?
Check that: 1) the element has a background or border (otherwise the rounding is not visible); 2) the parent is not clipping overflow; 3) there are no conflicting transform or clip-path. Also, border-radius does not affect tables with border-collapse: collapse.
What is the difference between px and % in border-radius?
With pixels, the radius is fixed. With percentages, it is relative to the element's dimensions. For a square, 50% creates a circle. For a rectangle, 50% creates elliptical rounding (half the width horizontally and half the height vertically for each corner).
How do I round just one corner?
Set four values, using 0 for the corners you do not want to round: border-radius: 12px 0 0 0 (top-left corner only).
How do I create an organic blob shape?
Use different percentages for each corner in slash notation, for example: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. Change the values to create different variations. The border-radius generator on reChecker can help you find the right look.
Which tool should I use to choose a border-radius value?
The border-radius generator on reChecker is a free online tool for visually adjusting corner rounding. It supports all four corners and elliptical radii (slash notation), and outputs ready-to-use CSS. It is suitable for designers and developers.