Border Radius Complete Guide
What is Border Radius?
Border Radius is a CSS technique that uses the border-radius property to make box element corners rounded. You can specify the radius using various units like pixels, percentages, em, etc. All four corners can be set differently or applied uniformly. This is an essential CSS property for creating smooth, modern UI.
Border Radius Syntax and Units
Basic syntax: border-radius: 10px; (all four corners 10px) • Individual: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius • Shorthand: border-radius: topLeft topRight bottomRight bottomLeft; • Units: px(absolute size), %(relative to element), em(relative to font), rem(relative to root font) • 50% on a square creates a perfect circle.
Key Property Values
• top-left: Top left corner radius • top-right: Top right corner radius • bottom-right: Bottom right corner radius • bottom-left: Bottom left corner radius • all-corners: Set all 4 corners identically • Slash syntax: border-radius: 10px / 20px; (horizontal 10px, vertical 20px - elliptical corners)
How to Use
Step 1: Select a preset corner style from the Presets tab or manually adjust in Custom tab. Step 2: Use 'All Corners' checkbox to adjust all 4 corners together or set individually. Step 3: Adjust radius values using sliders or input fields. Step 4: Preview results in real-time in the preview box. Step 5: Click 'Copy CSS' to copy the generated code to clipboard.
Common Preset Patterns
• No Radius: 0px (default rectangle) • Small: 4px (slightly rounded - buttons/inputs) • Medium: 8px (standard rounded - cards) • Large: 16px (large rounded - containers) • XLarge: 24px (very large rounded) • Round: 50% (perfect circle/ellipse) • Pill: 9999px (fully rounded ends - pill shape) • Top Only: top 16px, bottom 0px (top rounded card) • Bottom Only: top 0px, bottom 16px (bottom rounded card)
Use Cases
• Buttons & badges: Small(4px)~Medium(8px) for soft feel • Cards & panels: Medium(8px)~Large(16px) for clean separation • Modals & popups: Large(16px)~XLarge(24px) for smooth frames • Avatars & profile images: 50% for perfect circles • Tabs & pills: Pill(9999px) for rounded ends • Input fields: Small(4px) for subtle rounded corners • Image thumbnails: Medium(8px) for natural corners
Responsive Design Considerations
Use smaller border-radius values on mobile. 50-70% of desktop size provides balanced appearance on mobile screens. Example: desktop 16px → mobile 8-12px. Also, % units are responsive-friendly but can create unexpected elliptical corners on non-square elements, so use with caution.
Frequently Asked Questions (FAQ)
- Q. What's the difference between Border Radius and Border-Radius?
- A. Border Radius refers to the CSS property name border-radius. In CSS, you use border-radius (hyphenated), while in JavaScript, you use element.style.borderRadius (camelCase). The functionality is identical; only the notation differs.
- Q. I entered 50% but it's not a perfect circle.
- A. border-radius: 50% creates a perfect circle only when the element is a perfect square. On rectangles with different width and height, elliptical corners are generated. For a perfect circle, set the element's width and height to be equal.
- Q. How do I set different radii for each corner?
- A. Two methods: 1) Individual properties: border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; 2) Shorthand: border-radius: 10px 20px 30px 40px; (clockwise from top-left)
- Q. What's the browser compatibility?
- A. border-radius is fully supported in all modern browsers (Chrome, Firefox, Safari, Edge). Supported from IE9+, so it's safe to use in modern web development. Prefixes (-webkit-, -moz-) are no longer needed.
- Q. How to apply border-radius to images?
- A. When using images directly with img tags, border-radius works fine. However, when using background-image, apply border-radius to the parent element and add overflow: hidden; for the image to be clipped with rounded corners.