CSS Border Radius Generator
Generate CSS border-radius code with visual preview for creating rounded corners, circular elements, and custom border radius shapes
What is CSS Border Radius Generator?
CSS Border Radius Generator is a free online tool for creating rounded corners and complex border radius shapes with a visual preview. The border-radius property is one of the most commonly used CSS properties for modern web design, allowing you to round corners of elements, create circular avatars, pill-shaped buttons, and unique organic shapes.
Each corner of an element can have its own radius value, and by combining different values you can create interesting asymmetrical shapes, teardrop forms, and blob-like contours. The tool supports px, em, rem, and percentage units for maximum flexibility.
How to Use the CSS Border Radius Generator?
Creating custom border radius effects is easy:
- Choose a preset - Start with a preset shape like rounded, pill, circle, squircle, flower, drop, or blob.
- Select your unit - Choose between px, em, rem, or percentage values for the corner radii.
- Adjust individual corners - Fine-tune each corner (top-left, top-right, bottom-right, bottom-left) independently.
- Set dimensions - Adjust the width and height of the preview element to see how the radius behaves at different sizes.
- Copy the CSS - Once satisfied, copy the generated CSS code for use in your project.
Understanding Border Radius
The border-radius property is a shorthand that accepts up to four values (one per corner). When using percentages, the radius is calculated relative to the element's dimensions: a 50% border-radius on a square creates a perfect circle, while on a rectangle it creates an ellipse. Combining different units and values for each corner allows you to create unique, organic shapes beyond simple rounded rectangles.
Frequently Asked Questions
What is the difference between px and percentage border-radius?
Pixel values create a fixed-radius corner regardless of element size. Percentage values are relative to the element's dimensions, so 50% on a square creates a circle while on a rectangle it creates an ellipse.
How do I create a perfect circle in CSS?
To create a perfect circle, set equal width and height on the element, then apply border-radius: 50%. Alternatively, use a large fixed value like border-radius: 9999px to create a pill shape.
Can I set different radius for each corner?
Yes, border-radius accepts up to four values in the order: top-left, top-right, bottom-right, bottom-left. You can set each corner independently to create asymmetrical shapes.
What is the squircle shape?
A squircle is a shape between a square and a circle with continuous curvature. It is created by using a border-radius of approximately 30% on a square element, creating smoother corners than a standard rounded rectangle.
Does border-radius affect element layout?
No, border-radius only affects the visual appearance of an element. The actual element box and layout remain unchanged. The radius clips the background, borders, and box-shadow to create the rounded appearance.
Related Tools
convert-human-age-to-cat-years
Find Most Popular List Items
CSS Text Glitch Effect Generator
Point to Percent Converter
Hex to Base64 Converter
Remainder Calculator
SHA1 Hash Generator
Count One Bits
SQL Escape Unescape
Blur or Pixelate an Image
Right Triangle Calculator
Join Integers
Favicon Generator
HTML to BBCode Converter
Normalize Unicode Numbers
SASS to Stylus Converter
CSV to Base64 Converter
Source Code Viewer
Extract JSON Values
Generate Magic Calendar Dates