Border Radius

Per-corner control with elliptical mode, drag handles, and squircle preset

border-radius: 16%;

About this tool

What does the border-radius visualizer do?
It lets you drag handles on a preview box to set all four corner radii independently, then copies the exact CSS border-radius shorthand to your clipboard.
Can I create asymmetric (squircle-like) shapes?
Yes. Unlock the corners and drag each radius independently. You can also enter the horizontal and vertical radius separately for each corner using the full 8-value syntax.
Does it output the full border-radius CSS?
Yes. The generated code includes the full shorthand, the verbose four-corner form, and — where different — the horizontal/vertical split form (e.g., 10px 20px / 30px 40px).
Does it work on mobile?
Yes. Use your finger to drag the corner handles on the preview. The code output updates in real time.
About

Drag the corners of the preview box (within ~48px of each corner) to round them. Toggle elliptical mode for independent horizontal and vertical radii.

Squircle uses the elliptical syntax (e.g. 50% / 30%) to mimic the superellipse curve made famous by iOS.

Related tools

Box Shadow

Design CSS box shadows with visual controls.

▣

Box Shadow

Design CSS box shadows with visual controls.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →

Contrast Checker

Check WCAG contrast ratios for accessibility compliance.

◐

Contrast Checker

Check WCAG contrast ratios for accessibility compliance.

Open →
View all tools →