rounded_corner Border Radius Generator

Create CSS border-radius visually with individual corner control, interactive handles, and shape presets

Preview

pan_tool Drag corner handles to adjust radius interactively

Border Radius

16px

widgets Box Settings

expand_more
px
px

Presets

Click to apply common border radius patterns

CSS Code


        
        

            
            
        

    

    
    
    
    
    
    

        
About the CSS Border Radius Generator

        
Create perfectly rounded corners with our visual CSS border-radius generator. Design everything from subtle rounded corners to perfect circles, organic blob shapes, and asymmetric designs with instant code output.

        
        
Features

        
    
            
  • Individual Corner Control — Adjust each corner independently for asymmetric designs
    • 
            
  • Linked Mode — Change all corners at once for uniform rounding
    • 
            
  • Interactive Handles — Drag corner handles directly on the preview
    • 
            
  • Multiple Units — Switch between px, %, em, and rem
    • 
            
  • 12 Shape Presets — Common patterns like pill, circle, blob, message bubble
    • 
            
  • Live Preview — See changes instantly with customizable preview box
    • 
            
  • Multiple Output Formats — CSS, HTML snippet, or Tailwind arbitrary values
    • 
        

        
        
Understanding Border Radius

        
The CSS border-radius property rounds the corners of an element's outer border edge. It can take 1 to 4 values:

        
        

            
                

                    Syntax
                    Description
                    Example
                

            
            
                

                    border-radius: 10px;
                    All four corners are 10px
                    Uniform rounding
                

                

                    border-radius: 10px 20px;
                    TL/BR = 10px, TR/BL = 20px
                    Diagonal pairs
                

                

                    border-radius: 10px 20px 30px;
                    TL = 10px, TR/BL = 20px, BR = 30px
                    Three values
                

                

                    border-radius: 10px 20px 30px 40px;
                    TL / TR / BR / BL (clockwise from top-left)
                    All different
                

                

                    border-radius: 50%;
                    Perfect circle (on square element)
                    Avatars, buttons
                

            
        

        
        
Individual Corner Properties

        
You can also target specific corners using longhand properties:

        
    
            
  • border-top-left-radius
    • 
            
  • border-top-right-radius
    • 
            
  • border-bottom-right-radius
    • 
            
  • border-bottom-left-radius
    • 
        

        
        
Elliptical Corners

        
Border radius can have two values (horizontal / vertical) for elliptical corners using the slash syntax:

        
border-radius: 50px / 25px; /* horizontal / vertical */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

        
        
Common Use Cases

        

            
                

                    Element
                    Typical Radius
                    Purpose
                

            
            
                

                    Buttons
                    4-8px or pill (9999px)
                    Softened clickable appearance
                

                

                    Cards
                    8-16px
                    Container visual separation
                

                

                    Avatars
                    50% (circle)
                    Profile pictures
                

                

                    Input fields
                    4-6px
                    Subtle rounding
                

                

                    Modals/Dialogs
                    12-24px
                    Prominent rounding
                

                

                    Tags/Badges
                    Pill (height/2)
                    Fully rounded ends
                

            
        

        
        
Browser Support

        
The border-radius property is supported in all modern browsers including IE9+. Vendor prefixes (-webkit-, -moz-) are only needed for very old browsers.

        
        
Privacy & Client-Side Processing

        
This tool runs entirely in your browser. No data is sent to any server, and all CSS generation happens locally on your device.