PocketPlay
中文

Border Radius Generator

Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Preview — drag the handles

Corner values

Horizontal radii

Presets

CSS


    

    

      
Full 8-value syntax

        

      

    

  




How to use the border-radius generator
  1. Drag any of the eight handles around the preview — the top and bottom handles set horizontal radii, the left and right ones set vertical radii.
  2. Switch between % and px, or untick the 4-value option to write the full horizontal / vertical syntax.
  3. Try a preset or the random blob, then copy the CSS.
FAQ
What does the slash in border-radius mean?
Everything before the slash sets the horizontal radius of each corner; everything after sets the vertical radius. border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% therefore gives every corner an elliptical, not circular, curve — that is how blob shapes are made.
Should I use % or px?
Percentages scale with the element, so a 50% radius is always a perfect ellipse whatever the size. Pixels keep a fixed curve, which is what you want for cards and buttons. A very large pixel value such as 999px makes a pill.
Why does my circle look like an oval?
border-radius: 50% follows the box. If the element is not square the result is an ellipse — set an equal width and height, or use aspect-ratio: 1.


  


  

    
    

          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
          
            
            
              Flexbox Playground
              Try every flex container and item property on a live preview, then copy the CSS and HTML.
            
          
    

    
All tools →