Handitab

Border Radius Generator

Generate a CSS border-radius by setting each of the four corners in pixels with a live preview, then copy the finished declaration.

About Border Radius Generator

The CSS border-radius property rounds the corners of an element. Its shorthand takes up to four values in the order top left, top right, bottom right, bottom left. This generator sets each corner from 0 to 100 pixels, previews the shape, and outputs one value when all corners match or four values otherwise. Elliptical corners written with the slash syntax and percentage values are not covered.

How to use Border Radius Generator

  1. Fill in "Top left", "Top right", "Bottom right" and "Bottom left".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about Border Radius Generator

How do I make a perfect circle or a pill shape?

For a circle, give a square element border-radius: 50%. For a pill, use a radius larger than half the height, such as 9999px. Browsers scale oversized radii down so the corners never overlap.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
Box Shadow GeneratorGenerate a CSS box-shadow by adjusting offset, blur, spread, color, and opacity sliders with a live preview, then copy the declaration.Change Color SaturationIncrease or decrease the saturation of a color by a chosen percentage in HSL, and get the adjusted color as HEX, RGB, and HSL.Color Contrast CheckerCheck the contrast ratio between a text color and a background color against WCAG 2.1 AA and AAA thresholds, with a live preview.Color ConverterConvert a color between HEX, RGB, and HSL notation, including alpha values, by entering any CSS color code and copying the others.Color MixerMix two colors in any ratio from 0 to 100 percent and get the blended color as HEX, RGB, and HSL codes, calculated channel by channel.Color PickerPick a color with the color picker built into your browser and copy its code in HEX, RGB, or HSL for use in CSS or a design tool.