All tools

Border Radius

CSS

Visual CSS border-radius builder with live preview and presets

Per-corner sliders let you design uniform rounding or something asymmetric, like a speech bubble or a card with only its top corners rounded, matching the CSS `border-radius: top-left top-right bottom-right bottom-left` shorthand exactly. It also exposes elliptical corners, separate horizontal and vertical radius per corner, for more organic shapes beyond simple circular rounding, and starting from a preset (pill, circle, subtle rounding) is usually faster than guessing pixel or percentage values from scratch. `border-radius` has full support across modern browsers, including per-corner and elliptical values, so there's no compatibility caveat. Design data never leaves your browser: the whole thing runs client-side.

cssborder-radiusroundedshape

How to use Border Radius

  • 1.Drag corner-specific sliders to visually design asymmetric or uniform border-radius values, then copy the CSS.
  • 2.Use per-corner controls to create shapes like a speech bubble or a card with only top corners rounded.
  • 3.Start from a preset (pill, circle, subtle rounding) and fine-tune it instead of guessing pixel or percentage values.

Frequently asked questions

Can I set each corner independently?
Yes, you can control all four corners separately, matching the CSS `border-radius: top-left top-right bottom-right bottom-left` shorthand.
Does it support elliptical corners (different horizontal/vertical radius)?
Yes, CSS supports separate horizontal and vertical radius values per corner, and this tool exposes both if you need a more complex organic shape.
Is `border-radius` supported in all browsers?
Yes, it has full support in all modern browsers including per-corner and elliptical values.
Is my design data sent anywhere?
No, everything is generated and previewed locally in your browser.

Use via API, SDK, or MCP

cURL# Free: 1,000 req/day · Pro: 10,000 req/day
curl -X POST https://api.utilix.tech/v1/tools/border-radius \
  -H "Authorization: Bearer utx_live_..." \
  -H "Content-Type: application/json" \
  -d '{"unit":"px"}'

Get an API key from your dashboard · Full API docs →

Related tools

Box ShadowVisual CSS box-shadow builder with multiple layers and presetsCSSColor Shades GeneratorGenerate tints and shades scale from any base color with CSS variable outputColorCSS Animation BuilderBuild CSS @keyframes animations with presets, live preview, and generated CSSCSS