Border Radius Generator
Generate CSS border-radius values visually. Drag sliders for each corner, see the result in real-time, and copy the CSS code. Includes presets for common shapes like pills, circles, and more.
Key features
- Individual corner radius control
- Link/unlink corners for uniform values
- Preset shapes (pill, circle, leaf, ticket)
- One-click CSS code copy
Guide
The CSS border-radius property controls the rounding of element corners. At its simplest, border-radius: 8px rounds all four corners by 8 pixels. At its most complex, border-radius accepts eight values (four horizontal radii and four vertical radii separated by a slash) to create asymmetric, elliptical corners that produce organic, non-circular shapes. This guide covers every aspect of border-radius: syntax, visual effects, common patterns, performance considerations, and design applications. The basic syntax takes one to four values representing the radius of each corner's circle. One value applies to all four corners: border-radius: 10px. Two values set top-left/bottom-right and top-right/bottom-left: border-radius: 10px 20px. Three values set top-left, top-right/bottom-left, and bottom-right: border-radius: 10px 20px 30px. Four values set each corner individually in clockwise order starting from top-left: border-radius: 10px 20px 30px 40px. You can also target individual corners with longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Percentage values create effects that scale with the element. border-radius: 50% on a square element produces a perfect circle. On a rectangular element, 50% produces an ellipse. This is because percentage values are relative to the element's dimensions: horizontal radii are percentages of the width, vertical radii are percentages of the height. A 200px by 100px element with border-radius: 50% has corners with 100px horizontal radius and 50px vertical radius, creating an ellipse rather than a circle. This dimensional relationship is important to understand when working with responsive layouts where element proportions change at different viewport sizes. The slash syntax enables elliptical corners where the horizontal and vertical radii differ. border-radius: 50px / 25px creates corners that curve more horizontally than vertically, producing a stretched, oval effect. The full eight-value syntax is: border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v, where h is horizontal radius and v is vertical radius. This level of control lets you create organic, blob-like shapes that would be difficult to achieve otherwise. A value like border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produces an asymmetric, natural-looking shape often used in modern web design for decorative blobs, avatar backgrounds, and section dividers. Understanding the geometry behind border-radius helps predict visual results. Each corner of the element gets an ellipse (or circle if both radii are equal) fitted into it. The border, background, and content are all clipped to this rounded rectangle. The ellipse for each corner is defined by its horizontal radius (extending along the top or bottom edge) and its vertical radius (extending along the left or right edge). When both radii are equal, the corner is a circular arc. When they differ, the corner is an elliptical arc. Visualizing this ellipse helps you understand why certain combinations of values produce unexpected shapes. Creating a perfect circle requires two conditions: the element must be square (equal width and height), and border-radius must be 50% or a value equal to half the element's size. If the element is not square, border-radius: 50% creates an ellipse. For profile pictures and avatars, ensure the container is square using equal width and height values, or use aspect-ratio: 1 in CSS, then apply border-radius: 50%. Overflow: hidden on the container clips the image to the circular shape. An alternative is to use clip-path: circle(50%) which produces the same visual result. Pill shapes (stadium shapes) are rectangles with fully rounded short sides. Apply border-radius with a value equal to or greater than half the element's height. For a button that is 40px tall, border-radius: 20px rounds the ends into semicircles. Using a very large value like border-radius: 9999px guarantees a pill shape regardless of the element's height, because the browser caps the radius at half the smallest dimension. This technique is common for tags, badges, buttons, and input fields in modern UI design. The pill shape has become the default button style in many design systems including Apple's Human Interface Guidelines. Border-radius interacts with several other CSS properties in ways that affect the rendered result. Border itself is affected: the border line follows the rounded corner, maintaining its width throughout the curve. Outline does not follow border-radius in most browsers, rendering as a rectangle even when the element has rounded corners (though Firefox and newer Chromium versions now support rounded outlines). Box-shadow follows the border-radius, casting rounded shadows that match the element shape. Overflow: hidden clips child content to the rounded shape, which is essential for images inside rounded containers. Background-clip determines whether the background extends under the border into the rounded area. The border-radius rendering algorithm resolves conflicts when the sum of adjacent radii exceeds the available space. If you set border-top-left-radius: 100px and border-top-right-radius: 100px on an element that is only 150px wide, the two radii sum to 200px but only 150px is available. The browser proportionally reduces both radii to fit. Specifically, it calculates a scaling factor (150/200 = 0.75) and applies it to both radii, resulting in 75px each. This automatic adjustment means you can use large radius values without worrying about overflow, though the visual result may differ from your intent. The algorithm considers all four corners simultaneously, finding the smallest scaling factor needed. Nested border-radius requires inner elements to have smaller radii than their parents to maintain consistent visual spacing. If a card has border-radius: 16px and padding: 8px, the inner content area should have border-radius: 8px (parent radius minus padding). The formula is: inner radius = outer radius - gap between elements. If the gap is larger than the outer radius, the inner radius should be 0 (no rounding). This principle applies to cards containing images, nested containers, and any parent-child relationship where both have rounded corners. Ignoring this rule creates inconsistent gap widths at the corners that look visually wrong even if you cannot immediately identify why. CSS shapes and border-radius serve different purposes that are sometimes confused. Border-radius rounds the visual corners and the hit area of an element. CSS clip-path creates arbitrary shapes by clipping (circle(), ellipse(), polygon(), path()). For simple rounded rectangles, border-radius is more performant and easier to maintain. For complex shapes (triangles, hexagons, custom polygons), clip-path is necessary. Border-radius is composited on the GPU and is one of the cheapest visual effects in CSS. Clip-path with complex polygons can be more expensive. The shape-outside property uses border-radius for text wrapping around rounded elements, creating magazine-style layouts. Performance of border-radius is generally excellent. Rounded corners are rendered by the GPU compositor in all modern browsers and do not trigger layout recalculation or repainting during animations. Animating border-radius itself is also performant because the browser can interpolate the values and composite the result on the GPU. This makes border-radius suitable for hover effects (transitioning from squared to rounded corners) and animated elements. The only performance consideration is when border-radius is combined with box-shadow on many elements, as each rounded shadow requires additional compositing work. Browser support for border-radius is universal in all modern browsers without prefixes. The -webkit-border-radius and -moz-border-radius prefixes have not been necessary since approximately 2012. The only edge cases involve the slash syntax for elliptical corners, which has been supported everywhere since IE9. If you are supporting extremely old browsers (IE8), border-radius degrades gracefully: the element simply renders with square corners. No functionality is lost, only the visual rounding. Design trends involving border-radius cycle between extremes. The early 2010s favored subtle 3px to 5px rounding. The mid-2010s returned to sharp 0px corners in flat design. The late 2010s brought back soft rounding with 8px to 16px radii in material design and iOS-influenced interfaces. The early 2020s introduced super-rounded designs with 20px+ radii and asymmetric blob shapes. Current trends favor medium rounding (8px to 16px) for UI components and larger rounding (24px+) for cards and containers, creating a soft, approachable feel. The squircle (superellipse) shape, which Apple uses for its app icons, has gained popularity but requires clip-path or SVG because border-radius creates a standard circular arc, not a superellipse. Consistent border-radius values across a design system create visual cohesion. Define a scale of radius tokens: --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Apply these tokens consistently: buttons use --radius-md, cards use --radius-lg, avatars use --radius-full, small badges use --radius-sm. This systematic approach prevents the visual inconsistency of random radius values (6px here, 10px there, 14px somewhere else) that makes designs feel unpolished. Many CSS frameworks (Tailwind, Chakra UI) include pre-defined radius scales for this reason. Responsive border-radius can be achieved using clamp(), min(), or media queries. A card with border-radius: clamp(8px, 2vw, 24px) has smaller rounding on small screens and larger rounding on wide screens. This prevents large radii from dominating small elements on mobile. Alternatively, reduce border-radius at mobile breakpoints: border-radius: 24px on desktop, 12px on tablet, 8px on mobile. For full-width mobile cards that touch screen edges, removing border-radius entirely on small screens (border-radius: 0 at mobile breakpoint) is a common pattern that maximizes content area. Border-radius with images requires overflow: hidden on the container to clip the image to the rounded shape. Without overflow: hidden, the image extends beyond the rounded corners and the rounding appears only on the container background. An alternative approach uses the image itself as a background-image on a rounded element. For <img> elements, the object-fit property controls how the image fills the rounded container: object-fit: cover fills the entire area (cropping as needed), while object-fit: contain fits the entire image inside (potentially leaving gaps). Both approaches work, but overflow: hidden on a container with a child <img> is more common because it preserves the img element for accessibility (alt text) and SEO. Advanced shape creation combines border-radius with other CSS properties to create complex forms without images or SVG. An egg shape uses asymmetric vertical radii: border-radius: 50% / 60% 60% 40% 40%. A leaf shape uses opposite corner rounding: border-radius: 0 50% 0 50%. A drop shape combines border-radius on three corners with a sharp fourth corner. A speech bubble uses border-radius on the main shape with a pseudo-element (::before or ::after) for the tail. These CSS-only shapes avoid the need for SVG or images for simple decorative elements, reducing HTTP requests and enabling easy color theming through CSS custom properties. Border-radius and text content interact in specific ways. The text inside a rounded element does not follow the curve. Text is laid out in the rectangular content box, and the rounded corners clip the background and border only. For small radius values, this is not noticeable. For large radius values, the text near the corners may appear to have extra padding because the rounded background recedes from the content edge. This is one reason why elements with large border-radius values often need more padding than their squared counterparts. If you set border-radius: 24px on a button, the padding should be at least 12px to 16px on the sides so text does not visually crowd the curved edge. Animation of border-radius between states creates smooth shape transitions. Transitioning from border-radius: 0 to border-radius: 50% on a square element morphs it from a square to a circle. This effect is popular for loading indicators, hover effects, and reveal animations. CSS transition: border-radius 0.4s ease handles the interpolation. For more complex morphing (transitioning between different asymmetric shapes using the slash syntax), CSS transitions interpolate each of the eight values independently, producing smooth intermediate shapes. Print stylesheets and border-radius deserve consideration for web applications that users may print. Most modern browsers render border-radius in print, but some older versions do not. If your design depends on rounded corners for meaning (not just decoration), test the print output. For invoices, receipts, and other printable documents, rounded corners are decorative and their absence in print does not affect usability. Border-radius in CSS frameworks and component libraries has standardized to a token-based approach. Tailwind CSS uses classes like rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, and rounded-full. Bootstrap uses rounded, rounded-circle, rounded-pill, and rounded-0 through rounded-5. Chakra UI uses borderRadius with named sizes (sm, md, lg, xl, full). Understanding how these frameworks implement border-radius helps you migrate between systems and customize defaults to match your design requirements. Squircles (superellipses) are a shape that looks like a rounded rectangle but with a different mathematical curve. Apple uses squircles for iOS app icons. A squircle has more gradual curvature at the transition from straight edge to curve, producing a softer look than a standard border-radius circle arc. CSS border-radius cannot produce a true squircle because it uses circular or elliptical arcs. To create a squircle in CSS, you need clip-path with a path() function or an SVG mask. The visual difference between a border-radius rounded rectangle and a squircle is subtle at small sizes but noticeable at larger sizes, especially at corner radii above 20px. Container queries and border-radius can work together for truly responsive component design. With CSS container queries (@container), you can change border-radius based on the container size rather than the viewport size. A card component with border-radius: 24px in a wide container can switch to border-radius: 12px when placed in a narrow sidebar, regardless of the overall page width. This component-level responsiveness produces more consistent visual results than viewport-based media queries alone. Border-radius in table elements requires special handling. By default, border-radius on a <table> element does not round the corners of individual cells. To create a table with rounded outer corners, set border-collapse: separate (not collapse) on the table, apply border-radius to the table element, and hide overflow with overflow: hidden. For individual rounded cells, apply border-radius to specific <td> or <th> elements. The border-top-left-radius goes on the first cell of the first row, border-top-right-radius on the last cell of the first row, and so on. This per-cell approach is verbose but gives precise control. Transition timing functions affect how border-radius animations feel. A linear transition produces mechanical, robotic rounding. An ease transition starts fast, slows in the middle, and speeds up at the end, producing a natural feel. An ease-in-out transition creates smooth acceleration and deceleration. For playful interfaces, cubic-bezier functions can create bouncy or springy radius changes: transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) overshoots the target value before settling. Match the timing function to the overall animation style of your interface. CSS Houdini and the Paint API open future possibilities for border-radius beyond what the current specification offers. With Houdini, you can create custom paint worklets that draw any corner shape you want: squircles, scalloped edges, wavy borders, and other forms that standard border-radius cannot produce. While Houdini support is still limited (primarily Chromium browsers), it represents the future of custom CSS shapes. In the meantime, SVG clip-paths and masks provide cross-browser alternatives for non-standard corner shapes. Testing border-radius across screen resolutions and pixel densities matters because the rendering of curved edges differs between standard (1x), Retina (2x), and higher density displays. On a 1x display, a 1px border on a rounded corner can appear jagged. On a 2x display, the same corner renders smoothly because there are more physical pixels available to represent the curve. If your target audience includes users on low-density displays, test that your rounded corners look acceptable at 1x resolution. Larger radius values render more smoothly at all densities because the curve is more gradual. The border-radius generator tool lets you visually adjust each corner's horizontal and vertical radius independently, preview the result in real time, and copy the CSS. This is faster than guessing values in code, particularly for the slash syntax where the relationship between eight values and the visual output is not intuitive. Use the generator to explore asymmetric shapes, find the exact values that match your design intent, and then apply those values in your stylesheet.
Frequently asked questions
Can I set different values for each corner?
Yes, you can independently control all four corners: top-left, top-right, bottom-right, and bottom-left.
What units are used?
The tool uses pixels (px) by default, which you can change in the CSS output as needed.
