Developer Tools Platform
Skip to content
Categories

CSS Border Radius Generator

Generate a CSS border-radius value by specifying the radius of each corner.

Overview

  • Generates the CSS border-radius property just by specifying the radius of each corner (top-left, top-right, bottom-right, bottom-left).
  • Lets you adjust the radius while checking the rounded corners' appearance on the spot in a preview.
  • Generates a single-value shorthand (e.g. `border-radius: 8px;`) when all corners are equal, or a four-value shorthand (e.g. `border-radius: 8px 16px 24px 32px;`) when they differ.

Usage

  1. With "Link all corners" enabled, entering "Top-left (px)" applies the same value to all four corners.
  2. To set a different value per corner, disable "Link all corners" and enter each corner's value individually.
  3. Click "Generate CSS" to display a preview and the generated CSS (including border-radius).

Example

Input

Top-left 8px / top-right 16px / bottom-right 24px / bottom-left 32px

Output

border-radius: 8px 16px 24px 32px;

Use Cases

  • Adjusting the border-radius value used for UI elements such as cards, buttons, or modals while checking a preview
  • Building CSS for asymmetric rounded corners, such as a speech-bubble shape
  • Converting a border-radius value specified in a design mockup directly into a CSS property

FAQ

Does this support elliptical rounded corners (different horizontal and vertical radii)?

No. This tool only generates circular rounded corners (the same radius horizontally and vertically). If you need elliptical corners, manually edit the generated CSS using slash notation, such as `border-radius: 8px / 16px;`.

What is the range for the corner radius?

You can specify an integer between 0 and 500px.

Can I specify a percentage instead of px?

This tool only supports the px unit. If you need a percentage, manually rewrite the numeric part of the generated CSS.

Notes

  • The corner radius can be specified in the range of 0 to 500px.
  • Only circular rounded corners (the same radius horizontally and vertically) are generated. For elliptical corners, edit the generated CSS manually.

Related Tools

Box Shadow Generator

Generate a CSS box-shadow by specifying offset, blur, and color.

CSS Grid Generator

Generate CSS Grid styles from column count, row count, and gap.

CSS Flexbox Generator

Generate CSS Flexbox styles from direction, alignment, and gap.

Color Converter

Convert color codes between HEX, RGB, and HSL.

Recommended