The border-radius property in CSS3 is used to round the corners of an element's border. It transforms rigid, rectangular elements (like buttons, cards, and image containers) into shapes with smooth, rounded edges, making interfaces look more modern and approachable. From 0 (sharp corners) to 50% (perfect circle), you have full control over the degree of rounding.
Button Styling: Modern UI design relies heavily on rounded buttons. Small radii (4-8px) work well for standard buttons, larger radii (16-24px) suit call-to-action buttons, and 50% is perfect for icon buttons.
Card Containers: Content cards with 8-16px border-radius feel more inviting and reduce visual harshness, creating a softer information hierarchy.
Avatars & Images: Setting border-radius: 50% on image containers instantly creates perfect circular avatars β the standard across social networks and profile pages.
Tags & Badges: Pill-shaped tags with fully rounded ends (using large border-radius values) are extremely popular in navigation bars and filter interfaces.
border-radius accepts 1 to 4 values:
border-radius: 10px; β All four corners set to 10px
border-radius: 10px 20px; β Top-left/bottom-right 10px, top-right/bottom-left 20px
border-radius: 10px 20px 30px; β Top-left 10px, top-right/bottom-left 20px, bottom-right 30px
border-radius: 10px 20px 30px 40px; β Top-left 10px, top-right 20px, bottom-right 30px, bottom-left 40px
Pixels (px) are absolute values that remain constant regardless of element size. Percentages (%) are relative to the element's width/height, making them ideal for responsive designs. For example, 50% on a square produces a perfect circle, while on a rectangle it produces an ellipse.
Yes. border-radius supports percentage values, which represent the corner radius relative to the element's corresponding side length. For example, 50% on a square element creates a perfect circle, while on a rectangle it creates an ellipse. This tool supports both px and % units.
The full CSS border-radius syntax order is: top-left, top-right, bottom-right, bottom-left. If you provide one value, all four corners use it. Two values set top-left/bottom-right and top-right/bottom-left. Three values set top-left, top-right/bottom-left, and bottom-right respectively.
Set the element's width and height to the same value, and set border-radius to 50%. For example: width: 100px; height: 100px; border-radius: 50%. This tool provides a Circle preset that generates the perfect circle effect with one click.
border-radius is fully supported in all modern browsers (Chrome, Firefox, Safari, Edge). IE9+ also supports it. No vendor prefixes (-webkit- or -moz-) are needed. The CSS code generated by this tool works out of the box in all supported browsers.
Yes. CSS3 supports elliptical corners with the syntax: border-radius: horizontal-radius/vertical-radius. For example, border-radius: 10px/5px means a 10px horizontal radius and 5px vertical radius, creating an elliptical corner. This tool primarily supports circular corners (equal horizontal and vertical radii), but percentage values on rectangular elements naturally produce elliptical effects.
No. border-radius only affects the visual presentation, not the actual clickable area or layout dimensions of the element. Even if an element appears circular, its underlying bounding box remains rectangular. For a true circular hit area, you would need to use clip-path or SVG.
Yes. You can use individual properties like border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. This tool generates shorthand syntax by default, but you can achieve individual control by adjusting each corner's slider independently.
border-radius clips background images, background colors, and borders to follow the rounded corner outline. If the element also has overflow: hidden, child elements are clipped as well. This is a commonly used technique for creating rounded image containers, avatars, and galleries.