CSS border-radius Generator

Check rounded-corner values with a preview and generate border-radius CSS.

Category: Dev Tools

When to use?

Use it to adjust the corner roundness of UI elements like buttons, cards, and images, checking with a preview and generating CSS values.

How to use

  • Adjust each corner's radius with sliders.
  • Check the corner shape live in the preview.
  • Copy the generated border-radius CSS.

Input Explanation

Adjust the radius (px or %) of the four corners — top-left, top-right, bottom-right, bottom-left — with sliders.

Calculation Basis

It collects each corner value into a border-radius: [TL] [TR] [BR] [BL] rule and applies it to the DOM element's inline style for instant visual feedback.

Usage Examples

  • Adjust component corners - Quickly check the radius of buttons, cards, and images.
  • Quick pre-deploy check - Check inputs and output to reduce errors before dev/ops work.
  • Aid docs/reviews - Copy the result into dev docs, issues, or review comments.

Examples

  • All corners 50% → border-radius: 50% 50% 50% 50% (a full circle)
  • Only top-left 24px → a speech-bubble shape rounded on one corner

Cautions

  • Generated output is for reference; test carefully before production use.
  • Specific specs or framework-only syntax may cause compatibility issues.

Guides

Border-radius structure

When specifying four corners, the order is top-left top-right bottom-right bottom-left. A single value applies to all four corners.

Asymmetric rounded corners

Setting each corner differently makes shapes like drops, ribbons, and organic forms. Unlink the 4-corner button to adjust each independently.

FAQ

What is the unit?

It generates px-based border-radius values.

Can I preview the result?

Yes. Adjusting values changes the preview box corners instantly.

Can I make very round or circular corners?

Large values give a pill shape; on a square element, a big enough value approaches a circle.

Can corners differ?

Yes, each corner can be adjusted for shapes like a one-corner speech bubble.

Related Tools

  • CSS box-shadow Generator - Adjust shadow values with sliders and generate box-shadow CSS.
  • CSS gradient Generator - Adjust colors and angle to generate linear-gradient CSS.
  • Flexbox Generator - Adjust flex-direction, justify-content, align-items, and gap to generate Flexbox CSS.
  • JSON Formatter - Beautify or minify JSON strings instantly and check for validity errors.
  • UUID Generator - Generate up to 20 cryptographically secure UUID v4 values at once.
  • Password Generator - Generate secure random passwords in the browser by choosing length, character set, and count.