CSS Border Radius Generator
Create CSS border-radius values visually with a live preview. Adjust individual corners, pick presets, customize the preview box, and copy the generated CSS code.
About CSS Border Radius Generator
The CSS border-radius property is one of the most widely used styling properties in modern web design. It allows you to round the corners of any HTML element, transforming sharp rectangular boxes into softer, more visually appealing shapes. From subtle rounded corners on cards and buttons to perfectly circular avatars and pill-shaped badges, border-radius is essential for creating polished user interfaces.
The property supports both a shorthand and longhand syntax. The shorthand border-radius: 10px; applies the same radius to all four corners. You can also specify each corner individually: border-radius: 10px 20px 30px 40px; sets the top-left, top-right, bottom-right, and bottom-left corners in clockwise order. For even more control, the longhand properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius let you target specific corners independently.
Border radius values can be specified in multiple units. Pixels (px) create a fixed curve size regardless of the element's dimensions. Percentages (%) are relative to the element's size, making them ideal for responsive designs — setting border-radius: 50% on a square element creates a perfect circle. Em units scale with the element's font size, which can be useful for components that need to scale proportionally with text.
This generator provides a visual editor with real-time preview so you can experiment with different corner values and see the result immediately. Use the presets for common shapes, then fine-tune individual corners with the sliders. The tool outputs both shorthand and longhand CSS code that you can copy directly into your stylesheet. All processing happens in your browser with no data sent to any server.
FAQ
Q: How do I make a perfect circle with border-radius?
Set border-radius: 50% on an element that has equal width and height. The percentage-based value ensures the radius scales with the element's dimensions, creating a perfect circle regardless of size. If the element is not square, 50% will create an ellipse instead.
Q: What is the difference between border-radius shorthand values?
With one value (border-radius: 10px), all corners are the same. With two values (border-radius: 10px 20px), the first applies to top-left and bottom-right, the second to top-right and bottom-left. With three values, the first is top-left, the second is top-right and bottom-left, and the third is bottom-right. Four values set each corner individually in clockwise order starting from top-left.
Q: How do I create a pill-shaped button?
Use a very large border-radius value like border-radius: 9999px. This ensures the short sides of the element are fully rounded regardless of the element's height. This technique works reliably for any rectangular element and is commonly used for tags, badges, and call-to-action buttons.
Q: Does border-radius work with images and other elements?
Yes, border-radius works on any block or inline-block element, including images, divs, buttons, and inputs. For images, you may also need overflow: hidden on a container, or apply the radius directly to the <img> tag. Note that border-radius clips the element's content and background but does not affect the layout or box model dimensions.