Border Radius Generator

Pixel values (px): absolute rounding size regardless of element dimensions. 10px radius looks same on 100px or 1000px box (small vs barely visible). Use for consistent rounding across different element sizes. Percentage values (%): relative to element dimensions. 50% border-radius creates perfect circle on square element (width = height), creates pill/ellipse on rectangle. 10% on 200px box = 20px radius. Use for responsive designs where rounding should scale with element size. Mix strategy: px for small UI (buttons), % for large flexible containers. 50% is common for circles/pills.

Shorthand follows clockwise pattern starting top-left: border-radius: top-left top-right bottom-right bottom-left. Examples: border-radius: 10px = all corners 10px. border-radius: 10px 20px = top-left/bottom-right 10px, top-right/bottom-left 20px (opposite corners paired). border-radius: 10px 20px 15px = top-left 10px, top-right/bottom-left 20px, bottom-right 15px. border-radius: 5px 10px 15px 20px = each corner individually. Expanded syntax: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius for explicit control. Shorthand is cleaner; expanded is clearer.

Requirement: element must have equal width and height (square). Apply border-radius: 50%. This rounds corners to 50% of element size, meeting in center to form circle. Examples: 100x100px div with border-radius: 50% = 100px diameter circle. 200x150px div with border-radius: 50% = ellipse (not circle). For truly responsive circles, use aspect-ratio: 1/1; border-radius: 50%; width: 100px (height auto-calculates). Common uses: profile avatars, icon containers, floating action buttons. If element contains image, use object-fit: cover or overflow: hidden to prevent content overflow.

Yes, but limited. border-radius accepts two values per corner (horizontal/vertical radius) for elliptical corners: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates organic blob. Syntax: horizontal radii / vertical radii. This creates asymmetric, amoeba-like shapes. Limitations: only 4 control points (corners), cannot match complex SVG paths. For truly custom organic shapes: use clip-path: polygon() or path() for precise control, use SVG shapes with any vector path, layer multiple rounded elements, use CSS Houdini Paint API (advanced). Simple organic blobs: border-radius with mixed percentages works. Complex illustrations: use SVG.

Tables have border-collapse: collapse by default which prevents border-radius from rendering. Fix: set border-collapse: separate; border-spacing: 0; on table element. This allows border-radius to apply. Alternative approaches: apply border-radius to first/last cells (td:first-child, td:last-child) with additional overflow handling, wrap table in a div and apply border-radius + overflow: hidden to wrapper (easier), remove table display and use CSS Grid/Flexbox with div elements for flexible layouts with rounding. Modern approach: avoid <table> for layout, use semantic tables only for tabular data, and use CSS Grid with border-radius for visual table-like designs.

No, border-radius only affects element's visible border edges and background clipping, not layout or positioning. Pseudo-elements positioned absolutely (position: absolute) within element are not affected by parent's border-radius unless you explicitly apply overflow: hidden to parent (clips pseudo-element to rounded bounds) or apply same border-radius to pseudo-element itself (recommended for consistency). Common pattern for borders/shadows: apply border-radius to both element and pseudo-elements. For backgrounds: use overflow: hidden on parent to clip child backgrounds to rounded corners. Test: pseudo-element backgrounds may "peek" past rounded corners without overflow: hidden.