Skip to main content

    CSS Border Radius Generator

    Generate CSS border-radius visually. Adjust each corner independently or link them together.

    Free to use. Runs in your browser.

    Drag the sliders to set border-radius values and copy the generated CSS.

    border-radius: 16px;

    How CSS Border Radius Actually Works

    The border-radius property doesn't just round corners, it defines elliptical curves. Each corner gets two radii: horizontal and vertical. When they're equal, you get a perfect circular arc. When they differ, you get an elliptical curve that can create organic, blob-like shapes.

    Think of each corner as a quarter of an ellipse tucked into the box. The horizontal radius controls how far the curve extends along the top/bottom edge, while the vertical radius controls how far it extends along the side edge. That's why border-radius: 50% turns a square into a circle, each corner's curve meets the next, creating a continuous ellipse.

    This generator lets you set all eight values independently (4 corners × 2 radii), giving you full control over shapes that would be nearly impossible to eyeball in code.

    Common Border Radius Patterns

    PatternCSS ValueUse Case
    Subtle rounding4px or 0.25remInput fields, table cells, small cards
    Standard card8px or 0.5remCards, modals, dropdowns
    Soft card12-16px or 0.75-1remModern SaaS cards, app-style UI
    Pill / chip9999px or fullTags, badges, pill buttons
    Circle50% (on a square)Avatars, status dots, round buttons
    Top-only12px 12px 0 0Card headers, tab bars, sheet handles
    Organic blob30% 70% 70% 30% / 30% 30% 70% 70%Decorative shapes, backgrounds, avatars

    What this means for you: Most UI elements only need the first three patterns. Save the complex elliptical values for decorative elements where a unique shape adds personality.

    The Shorthand Syntax

    CSS border-radius shorthand follows the same clockwise pattern as margin and padding, top-left, top-right, bottom-right, bottom-left. The slash separates horizontal radii from vertical radii:

    One Value

    border-radius: 8px, all four corners, circular arc.

    Two Values

    border-radius: 8px 0, top-left/bottom-right get 8px, top-right/bottom-left get 0.

    Four Values

    border-radius: 8px 4px 12px 0, each corner set individually, clockwise from top-left.

    Elliptical (slash syntax)

    border-radius: 50% / 30%, horizontal radii before the slash, vertical radii after. This is how you make organic shapes.

    Tailwind CSS Border Radius Classes

    ClassCSS ValuePixels (default config)
    rounded-sm0.125rem2px
    rounded0.25rem4px
    rounded-md0.375rem6px
    rounded-lg0.5rem8px
    rounded-xl0.75rem12px
    rounded-2xl1rem16px
    rounded-3xl1.5rem24px
    rounded-full9999pxPill / circle

    What this means for you: If your project uses Tailwind, grab the pixel value from this generator and pick the closest utility class. For custom values, use arbitrary syntax likerounded-[14px].

    Related Tools

    CSS Box Shadow Generator

    Add depth and elevation to rounded elements.

    CSS Gradient Generator

    Fill your rounded shapes with smooth colour gradients.

    Colour Palette Generator

    Create harmonious colour schemes for your UI components.

    PX to REM Converter

    Convert pixel radius values to responsive rem units.

    CSS Beautifier

    Clean up your stylesheets after pasting generated CSS.

    CSS Minifier

    Compress your production CSS for faster page loads.

    How to use this tool

    1

    Drag the slider to set your border-radius value (or unlink corners for individual control)

    2

    Preview the shape live on the blue box above

    3

    Click Copy CSS to grab the generated code

    Common uses

    • Creating rounded card designs for modern UI layouts
    • Building circular avatar components with 50% radius
    • Generating pill-shaped buttons and tag elements
    • Previewing organic blob shapes with asymmetric radii

    Share this tool

    Frequently Asked Questions

    What is border-radius?
    CSS border-radius rounds the corners of an element. You can set each corner independently or use a single value for all four corners.
    What units can I use?
    Pixels (px) and percentages (%) are most common. 50% on a square creates a perfect circle. You can also use rem, em, or any CSS length unit.
    Can I make a pill shape?
    Yes, set a large border-radius like 9999px on a rectangular element to get a pill/capsule shape. In Tailwind CSS, this is the rounded-full class.
    What's the difference between px and % for border-radius?
    Pixels give you a fixed curve size regardless of element dimensions. Percentages scale with the element, 50% always creates the maximum possible curve. Use px for consistent UI elements and % for responsive shapes.
    How do I make organic blob shapes with border-radius?
    Use the slash syntax to set different horizontal and vertical radii for each corner, like border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. This creates asymmetric curves that look organic and hand-drawn.
    What border-radius values does Tailwind CSS use?
    Tailwind's default scale goes from rounded-sm (2px) through rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-3xl (24px), to rounded-full (9999px).
    Can I set different radii for each corner?
    Yes. Toggle off 'Link all corners' in this tool to control each corner independently. In CSS, use four values: border-radius: top-left top-right bottom-right bottom-left.
    Does border-radius affect the clickable area?
    Visually the corners are rounded, but by default the clickable/tappable area remains rectangular. You can add overflow: hidden to clip content and interactions to the rounded shape.
    What border-radius should I use for cards?
    Most modern design systems use 8-16px (rounded-lg to rounded-2xl in Tailwind) for cards. Apple uses 12-20px. Google's Material Design uses 12px. Match your design system's existing values.
    How do I make a circle with border-radius?
    Set border-radius: 50% on an element with equal width and height. If the dimensions aren't equal, you'll get an ellipse instead of a circle.
    Does border-radius work on images?
    Yes. Apply border-radius directly to img elements or their container with overflow: hidden. This is the standard way to create circular avatars.
    What's the shorthand order for border-radius?
    The shorthand follows clockwise order: top-left, top-right, bottom-right, bottom-left. Two values means top-left/bottom-right and top-right/bottom-left. One value applies to all corners.

    Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.