Border Radius Generator
Build CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.
border-radius: 20px 20px 20px 20px;How to use the border radius generator
Drag the corner sliders. Toggle 'linked' to set all four corners at once.
Formula & explanation
border-radius: top-left top-right bottom-right bottom-left. Equal values can be condensed to one number.
Examples
Default: 20px on all corners.
Frequently asked questions
- How is border-radius shorthand ordered?
- The four-value shorthand goes clockwise: top-left, top-right, bottom-right, bottom-left. A single value applies to all four corners.
- How do I make a perfect circle with CSS?
- Set border-radius: 50% on an element that has equal width and height — or use border-radius: 9999px for a pill shape regardless of dimensions.
- Can I set different horizontal and vertical radii?
- Yes — use the elliptical form: border-radius: 40px / 20px; sets horizontal radius to 40px and vertical to 20px, creating an oval curve on each corner.
- What unit should I use for border-radius?
- px is most predictable for fixed-size elements. Use % when you want corners that scale with the element's size, such as a 50% circle.
Related design & css tools
- CSS Gradient GeneratorBuild linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
- Box Shadow GeneratorCompose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
- Type Scale GeneratorGenerate a modular type scale from a base font size and ratio (Major Third, Perfect Fourth, Golden Ratio, and more). Outputs CSS custom properties for a consistent typographic system.
- Spacing Scale GeneratorBuild a consistent spacing scale for design systems — enter a base unit and multiplier to generate a full set of spacing tokens in px and rem, ready for Tailwind or CSS variables.
- Image Color PaletteExtract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
- WCAG Contrast CheckerCheck foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.