Border Radius Guide:
Corners, Circles & Design
Rounded corners transformed web design from sharp rectangles to soft, approachable interfaces. Learn border-radius syntax, design guidelines for every element type, and how to combine with shadows.
Border Radius: The Property That Softened the Web
In the early web, every element was a rectangle with sharp 90-degree corners. Buttons, cards, images, inputs — all rectangles. CSS border-radius introduced in CSS3 changed the visual language of the web. Rounded corners feel approachable, friendly, and modern. They soften hard edges and guide the eye. The property is simple — one value rounds all four corners — but its flexibility allows each corner to have a different radius, creating asymmetrical and organic shapes. Our border radius generator lets you design corners visually. Adjust sliders, see the preview, copy the CSS.
Border Radius Syntax and Values
The shorthand border-radius accepts one to four values, applied clockwise from top-left: border-radius: 8px (all four corners), border-radius: 8px 16px (top-left/bottom-right = 8px, top-right/bottom-left = 16px), border-radius: 8px 16px 24px 32px (each corner individually). Individual corner properties exist for clarity: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
For elliptical corners, use the slash syntax: border-radius: 20px / 10px creates corners with 20px horizontal radius and 10px vertical radius — wider than they are tall. Each corner can have different horizontal and vertical radii, enabling complex organic shapes. This is useful for pill-shaped containers, speech bubbles, and decorative elements.
Design Guidelines by Element Type
Buttons: 4-8px for standard buttons. 24-48px for pill-shaped buttons (popular in mobile design and modern SaaS). The trend has moved from slightly rounded (4-6px) to moderately rounded (8-12px) for primary CTAs — the extra rounding makes buttons feel more clickable. Fully rounded (50px+) creates "pill" buttons that stand out as alternative actions.
Cards: 8-16px. Cards represent contained content, and rounding reinforces the containment. Larger cards (dashboard widgets, feature sections) benefit from larger radii. Cards with small border-radius (4px or less) look like older design systems or enterprise software.
Images and Avatars: border-radius: 50% on a square image creates a perfect circle — the standard for user avatars. For rectangular images, 4-8px prevents the sharp corners from drawing attention away from the content. Rounded image corners also make inconsistent image aspect ratios feel more cohesive in a grid.
Input Fields: 4-8px. Text inputs need to feel like places to type. Matching the border-radius of inputs and buttons in a form creates visual consistency. A form where buttons are round (24px) and inputs are square (0px) looks mismatched. Use the same radius for both, or deliberately contrast them.
Modals and Dialogs: 12-20px. Modals overlay the page and should feel separate from the content beneath. Larger rounding helps the modal feel like a distinct surface. The top corners of a bottom sheet on mobile often use 16-24px to create a smooth transition.
Border Radius with Other Properties
Overflow hidden. Apply overflow: hidden to a container with border-radius, and any child content (images, backgrounds) gets clipped to the rounded shape. This is the standard technique for circular avatars and rounded image thumbnails — set border-radius on the image itself, or on a container with overflow hidden.
Combining with box-shadow. Shadows follow the border-radius of the element. A rounded card with border-radius: 12px casts a shadow with 12px rounded corners. This consistency is what gives modern UI cards their polished look. Use our box shadow generator alongside this tool for the complete card styling package.
Border vs. outline. border follows border-radius. outline (used for focus indicators) does not follow border-radius in all browsers. For consistent rounded focus rings, use box-shadow instead of outline: box-shadow: 0 0 0 3px rgba(59,130,246,0.5) — the shadow respects border-radius and provides the same visual feedback.
Accessibility Note
Extreme border-radius on interactive elements (buttons, inputs) can reduce the clickable area at corners for users who struggle with precise mouse movements. Keep primary action buttons at 12px radius or lower. Use larger radii for decorative elements and containers, not for critical interactive controls. For focus indicators, use box-shadow with matching border-radius to ensure the focus ring is visible at all zoom levels.