CSS Border Radius Generator
Shape
Advertisement
CSS Border Radius Explained
The border-radius property rounds the corners of an element's border box. You can set all corners at once or control each independently for asymmetric shapes. With the "/" syntax, you can create elliptical corners for organic blob shapes.
Border Radius Shorthand
border-radius: 8px— all four corners equalborder-radius: 8px 16px 24px 32px— top-left : top-right : bottom-right : bottom-left (clockwise)border-radius: 50%— perfect circle (on square elements) or ellipseborder-radius: 100px(large value) — "pill" shape on any width/height- Blob shapes:
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%
How do I make a perfect circle with CSS?
The element must be square (equal width and height), then set border-radius: 50%. Example: width: 100px; height: 100px; border-radius: 50%;. For user avatars, also add overflow: hidden to clip the image content to the circular shape. If the element isn't square, 50% creates an ellipse proportional to the element's dimensions.
Do I still need vendor prefixes for border-radius?
No. Border-radius has been supported in all major browsers since 2011 (IE 9+) without vendor prefixes. The -webkit-border-radius prefix was needed for Safari 3.x and Chrome 3.x but is completely unnecessary today. Over 99.8% of global browser usage supports unprefixed border-radius. Safely drop any legacy -webkit- or -moz- prefixes from new projects.