Border Radius Generator Online — Free Tool
Configure border radius attributes intuitively and generate the accompanying CSS or Tailwind classes.
Preview
CSS
border-radius: 24px 24px 24px 24px;
Tailwind classes
rounded-[24px]
Privacy note: All processing happens entirely in your browser. No data is sent to our servers.
About this tool
Border radius rounds corners on cards, avatars, and buttons. Set per-corner values or use shorthand to copy border-radius CSS instantly.
Preview helps when matching design specs that use uneven radii on the same component.
Common use cases
- Pill buttons and rounded cards
- Avatar and thumbnail clipping
- Asymmetric corners on marketing blocks
- Matching Figma radius tokens in code
How to use
- Drag sliders for each corner or use a unified radius control.
- Toggle between uniform and per-corner editing.
- Preview the box with your chosen radii.
- Copy border-radius CSS for your component.
This page is available at /tools/border-radius-generator/.
Understanding the result
- 50% on a square element yields a circle; on rectangles you get elliptical corners.
- Four-value shorthand order is top-left, top-right, bottom-right, bottom-left.
- Large radii on small elements can collapse sides into curves.
- border-radius clips background and border but children may overflow without overflow:hidden.
Related tools
Base64 Encoder & Decoder
Securely encode plain text into Base64 format, or decode Base64 strings back to their original readable state.
Box Shadow Generator
Visually construct box shadows and automatically generate standard CSS or arbitrary Tailwind shadow classes.
Code Diff Viewer
Perform side-by-side textual comparisons to easily spot differences between two versions of code or text.
Color Picker & Converter
Select custom colors visually and convert seamlessly between HEX, RGB, and HSL color formats.
Cron Expression Explainer
Translate complex 5-field cron scheduling expressions into clear, plain English sentences.
CSS & JS Minifier
Compress your CSS and JavaScript code by stripping unnecessary whitespace and comments to optimize load times.
FAQ
How do I make a circle?
Use 50% radius on equal width and height, or border-radius: 9999px for pills.
Can corners differ?
Yes. Per-corner values create asymmetric shapes popular in modern layouts.
Does this affect border-image?
border-radius rounds the border box; border-image behavior can differ—test in target browsers.
Tailwind equivalent?
Map values to rounded-lg, rounded-xl, or arbitrary rounded-[12px] classes.