Controls
Corner Values
Preview
↖ TL: 20px
↗ TR: 20px
↙ BL: 20px
↘ BR: 20px
Presets
CSS
css
border-radius: 20px;
Tailwind CSS
html
rounded-[20px]
SCSS/Sass
scss
$border-radius: 20px 20px 20px 20px;
.element {
border-radius: 20px;
}How to Use
Creating Border Radius
- • Use sliders or input fields to adjust corners
- • Link corners for uniform radius
- • Try different units (px, rem, %, em)
- • Preview changes in real-time
- • Choose from preset shapes
Copy & Use
- • Copy CSS code to your stylesheets
- • Use Tailwind classes for utility-first CSS
- • Apply to any HTML element
- • Works with borders, backgrounds, images
- • Compatible with all modern browsers
Design Tips
- • Use subtle radius for professional look
- • Larger radius for playful designs
- • Organic shapes for unique elements
- • Consider container size and content
- • Test on different screen sizes
Common Uses
- • Buttons and interactive elements
- • Cards and content containers
- • Images and media elements
- • Modals and overlay components
- • Custom shape designs