How to use the CSS border radius generator
Start by using the four corner sliders to adjust the radius for each corner independently. When "Link corners" is checked, all four corners change together—uncheck it to set different values for each corner. The live preview immediately shows how your shape looks, so you can iterate quickly without switching between a code editor and browser.
Use the presets row for common shapes: "Rounded" gives uniform gentle rounding, "Pill" creates a capsule shape ideal for buttons and tags, "Blob" produces an organic asymmetric shape, "Ticket" rounds only the top corners, "Drop" creates a teardrop effect, and "Square" resets to sharp corners. After selecting a preset, you can fine-tune individual corners to get exactly the shape you want.
Choose your unit (px, %, em, or rem) based on your use case. Adjust the preview element's color, width, height, border width, and border color to simulate your actual UI context. When the shape looks right, click "Copy CSS" to copy the complete border-radius declaration (and border if configured) to your clipboard. Paste it directly into your stylesheet or component styles.
Border radius in modern design systems
Consistent border radius is a foundational element of design systems. Most design systems define a radius scale (e.g., 2px, 4px, 8px, 12px, 16px, 24px, full) and assign specific values to component types. Buttons might use 8px, cards might use 12px, modals might use 16px, and avatars might use 50% (full circle). This consistency creates visual harmony across the entire interface.
The trend toward larger border radii in modern UI design (Apple's iOS design language, Google's Material Design 3) reflects a shift toward softer, more approachable interfaces. Larger radii feel friendly and organic, while smaller radii feel more technical and precise. The right choice depends on your brand personality and the context of the element.
When working with responsive layouts, consider how border-radius interacts with element size. A 16px radius that looks perfect on a large card may dominate a small chip component. Using percentage-based radii or CSS custom properties (--radius-sm, --radius-md, --radius-lg) with responsive adjustments ensures corners look proportional across all screen sizes and component scales.
Advanced border-radius techniques
CSS border-radius supports elliptical corners using the slash (/) syntax. For example, border-radius: 50px / 20px creates corners that are wider horizontally than vertically, producing an oval shape. Each corner can have its own horizontal and vertical radius: border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px. This is the basis for creating organic, blob-like shapes with pure CSS.
Nested border radii need special attention. When an outer element has border-radius and padding, the inner element's radius should be smaller by the amount of padding to maintain a consistent visual gap. For example, if the outer container has border-radius: 16px and padding: 8px, the inner element should have border-radius: 8px. This calculation ensures the curves run parallel rather than creating awkward mismatched corners.
Border-radius interacts with overflow: hidden to create clipping masks. This is commonly used for image containers, card thumbnails, and video elements. The element and all its children are visually clipped to the rounded shape. Combined with object-fit: cover on images, this creates clean, consistently shaped media containers without needing to pre-process images to specific shapes.
Frequently Asked Questions
What is CSS border-radius?
The CSS border-radius property rounds the corners of an element's outer border edge. You can specify a single value for uniform rounding, or four values (top-left, top-right, bottom-right, bottom-left) for independent corner control. Values can be in pixels, percentages, em, or rem. Setting border-radius to 50% on a square element creates a circle.
What's the difference between px and % for border-radius?
Pixel values create an absolute radius regardless of element size. Percentage values are relative to the element's dimensions—border-radius: 50% creates an ellipse based on width and height. For responsive designs, percentages ensure corners scale proportionally with the element. For consistent rounded corners across different sized elements, pixels provide more predictable results.
How do I make a perfect circle with CSS?
Set border-radius to 50% on an element with equal width and height. For example: width: 100px; height: 100px; border-radius: 50%. If the element is not square, 50% creates an ellipse instead. You can also use border-radius: 9999px for a pill shape on elements with unequal dimensions.
Can I animate border-radius?
Yes. Border-radius is animatable with CSS transitions and keyframe animations. Transitioning between different corner values creates smooth morphing effects. This is commonly used for hover states, loading animations, and interactive UI elements. Modern browsers handle border-radius transitions efficiently without layout thrashing.
What is the shorthand syntax?
border-radius accepts 1 to 4 values: 1 value applies to all corners, 2 values apply to top-left/bottom-right and top-right/bottom-left, 3 values apply to top-left, top-right/bottom-left, and bottom-right, and 4 values apply to each corner individually (clockwise from top-left). You can also use slash notation for elliptical corners: border-radius: 10px / 20px.
Does border-radius work with borders and outlines?
Border-radius rounds both the outer border edge and the inner content edge (with padding). The inner radius equals max(0, outer-radius - border-width). Outlines, however, do not follow border-radius in all browsers—some render square outlines regardless. Use box-shadow as an alternative for rounded outline effects.
Privacy and methodology
This tool runs entirely in your browser. Border radius values are applied using inline styles for the live preview. The generated CSS uses standard border-radius shorthand notation compatible with all modern browsers. No data is sent to any server. Border-radius is supported in all browsers including Chrome, Firefox, Safari, Edge, and mobile browsers.