The CSS border-radius property rounds the corners of elements. While simple values create uniform corners, CSS supports specifying different values for each corner. This visual tool lets you adjust each corner independently with sliders, preview the result in real time, and copy the generated CSS code.
border-radius: 16px;
Use the sliders or number inputs to set the border radius for each corner independently. The preview element updates in real time showing the exact shape. Presets for common shapes (circle, pill, rounded rectangle, blob) are available. Copy the generated CSS code with one click.
Border radius is used for creating rounded buttons and input fields, circular avatars and profile pictures, pill-shaped tags and badges, chat bubbles with organic shapes, card components with subtle rounding, custom decorative shapes without images, tooltip arrows, and creative blob shapes using the advanced elliptical radius syntax. It is one of the most commonly used CSS properties in modern UI design.
The CSS border-radius shorthand accepts 1-4 values (all corners / vertical | horizontal pairs / individual corners). For elliptical corners, use the slash syntax: border-radius: 50px / 30px creates elliptical curves. Individual properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Values can be in px, %, em, or rem. Percentage values are relative to the element's dimensions - 50% on a square creates a circle.
border-radius accepts 1 to 4 values for uniform or individual corner rounding. One value applies to all corners, two values apply to top-left/bottom-right and top-right/bottom-left, four values apply to each corner clockwise from top-left.
Set border-radius: 50% on a square element (equal width and height). The 50% value creates a perfect circle. For a rectangular element, 50% creates an ellipse.
Yes. Use the longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or use the shorthand: border-radius: 10px 20px 30px 40px (top-left, top-right, bottom-right, bottom-left).
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools