Ad Space (728x90) Ad Space (320x50)
Border Radius Generator
CSS Code
Ad Space (336x280) Ad Space (300x250)
How to Use
- Choose a preset or customize manually
- Uncheck "Link all corners" for individual control
- Adjust each corner radius with sliders
- Modify preview box dimensions if needed
- Copy the generated CSS code
Common Border Radius Uses
- Buttons - Rounded or pill-shaped buttons
- Cards - Soft, rounded card corners
- Avatars - Circular profile images
- Inputs - Rounded form fields
- Badges - Pill-shaped labels and tags
Ad Space (336x280) Ad Space (300x250)
Frequently Asked Questions
What is border-radius in CSS?
Border-radius is a CSS property that rounds the corners of an element's outer border edge. You can create circles, pills, and custom rounded shapes.
How do I make a circle with border-radius?
Set border-radius to 50% on a square element. The width and height must be equal for a perfect circle.
Can I set different radii for each corner?
Yes! Use the full syntax: border-radius: top-left top-right bottom-right bottom-left. Or use individual properties like border-top-left-radius.
What are the two values in border-radius?
Each corner can have two values (horizontal/vertical) to create elliptical corners. The syntax is: horizontal-radius / vertical-radius.
What units can I use for border-radius?
You can use px, em, rem, %, or any CSS length unit. Percentages are relative to the element's dimensions.