In this article
Understanding border-radius
The CSS border-radius property rounds the corners of an element's outer border edge. It accepts one to four values to control each corner independently — top-left, top-right, bottom-right, and bottom-left. A single value applies the same radius to all four corners, while four values let you create asymmetric shapes.
Border-radius works with any element that has visible borders, backgrounds, or shadows. It clips both the background and the border to the rounded shape, and it interacts properly with box-shadow, outline, and overflow. The property is essential for modern UI design — from subtle button rounding to complex organic shapes.
Creating Shapes with border-radius
By varying the radius values, you can create a wide range of geometric shapes entirely with CSS. The generator lets you visually adjust each corner and immediately see the resulting shape.
- Pill shape — set border-radius to 9999px (or 50% on a wide element) to create fully rounded ends like a capsule button. This is the most common UI pattern for tags, badges, and pill-style buttons
- Circle — apply border-radius: 50% to a square element (equal width and height). The percentage is calculated relative to each dimension, creating a perfect circle from any square
- Leaf and blob shapes — set two opposite corners to high values and the other two to zero (e.g., border-radius: 60% 0 60% 0) to create organic leaf, drop, or blob shapes popular in modern landing pages
Try it free — no signup required
Generate Border Radius CSS →Advanced Elliptical Corners
The border-radius shorthand supports a slash (/) syntax that lets you define separate horizontal and vertical radii for each corner. This creates elliptical (oval) curves instead of circular ones, enabling complex organic shapes that circular radius alone cannot achieve.
- Slash syntax — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% means the horizontal radii are all 50%, but the vertical radii differ (60% top, 40% bottom), creating an egg-like shape
- Individual corner properties — border-top-left-radius: 50px 30px sets an elliptical corner with 50px horizontal radius and 30px vertical radius. This gives finer control than the shorthand
- Percentage behavior — when using percentages, the horizontal radius is relative to the element's width and the vertical radius is relative to its height. This means 50% / 50% on a rectangle creates an ellipse, not a circle
Frequently Asked Questions
Should I use percentage or pixel values for border-radius?
Use percentages when you want the radius to scale with the element's size (circles, ellipses, responsive shapes). Use pixels for consistent corner rounding regardless of element size (button corners, card corners, input fields). A common pattern is border-radius: 8px for UI components and border-radius: 50% for avatars and circular elements.
Does border-radius cause subpixel rendering issues?
On high-DPI displays, small border-radius values (1-2px) can appear jagged due to subpixel rendering. This is most noticeable with thin borders on low-contrast backgrounds. Using a slightly larger radius (3-4px minimum) or applying will-change: transform can improve rendering quality on retina screens.
How does border-radius interact with borders and outlines?
Border-radius rounds the outer edge of the border. If the element has a thick border, the inner radius is automatically calculated as outer-radius minus border-width. Outlines do not follow border-radius in most browsers — they remain rectangular. Box-shadow, however, does follow the rounded shape.