DevToolPal
EN

CSS Border Radius Generator

Set CSS border-radius per corner, including elliptical corners and blob shapes, in px, % or rem, with a live preview, presets and the shortest CSS to copy.

Runs locally, never uploaded

Corners

Unit

Preview

CSS

Presets
Border radius CSS
 
 
 
 
 
What it does


The border radius generator lets you shape rounded corners visually and copy the shortest CSS. Set one radius for all corners or each corner on its own, switch on elliptical corners to give every corner a separate horizontal and vertical radius, and watch the preview change as you drag. It works in px, %, rem or em, and you can paste an existing border-radius value to edit it. Everything runs in your browser.


How to use


    

  1. Start from a preset or keep the sample blob.
    2. 

  2. Choose the Unit. Switching units converts the current values (rem and em count as 16px, % is relative to the preview box).
    3. 

  3. Turn Same radius for all corners on for one slider, or off to set Top left, Top right, Bottom right and Bottom left separately.
    4. 

  4. Turn on Elliptical corners to get a Horizontal and a Vertical slider per corner.
    5. 

  5. Resize the preview with Width and Height, then copy the code from the CSS card. Turn on longhand output if you prefer four separate properties.
    6. 



Example


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Good to know


    

  • Shortest form. The output collapses equal values: four identical corners become one value, and the slash part is dropped when every corner is circular.
    • 

  • Percentages follow the box. Horizontal percentages use the element’s width and vertical ones its height, so 50% on a rectangle gives an ellipse, not a circle.
    • 

  • Radii that do not fit are scaled down together by the browser, which is why a huge px value makes a clean pill.
    • 

  • Children and overflow. Rounded corners clip backgrounds and borders, but not child content: add overflow: hidden to clip images inside the box.
    • 

 
  
 
FAQ
 
 
  › What does the slash in border-radius mean?  
Values before the slash are the horizontal radii and values after it are the vertical radii. When they differ, the corner becomes a quarter of an ellipse instead of a circle. For example 50% / 30% gives a flatter curve than 50%.
 
  › In what order are the four corners written?  
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. With fewer values CSS repeats them: two values set top-left/bottom-right and top-right/bottom-left, three values set top-left, top-right/bottom-left and bottom-right.
 
  › How do I make a circle or a pill?  
border-radius: 50% turns a square into a circle and a rectangle into an ellipse. For a pill with round ends on any width, use a very large length such as 9999px: browsers shrink radii that do not fit, so the ends stay perfectly round.
 
  › How are blob shapes made?  
Blobs use eight different percentages: four horizontal and four vertical radii, such as 30% 70% 70% 30% / 30% 30% 70% 70%. Pick a blob preset, then drag the corner sliders with Elliptical corners on to reshape it.