Border-radius
The boxes are 50x50px and have a background-color
All round 10px
All round 25,50,75,100px
All round 100,75,50,25px
All round 20px
All round 15px 5px thick
top-left 10px
top-right 10px
bottom-right 10px
bottom-left 10px
These boxes have elliptical borders
All round 50%
All round -- MDN example
top-left 50%
top-right 50%
bottom-left 50%
bottom-right 50%
All round -- MDN example 2 -- outline
These boxes have (rectangular) background images, that are clipped by the border radius
In a nutshell
In a circle
Rounded
This is an <img> tag with a border radius
These use a border-radius + a background clip (the radius of the inner background should shrink)
Solid color
Background image
Background image layers
The all have a border-radius +/- overflow: hidden, which clips their child elements
Lorem ipsum, without overflow: hidden
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum, with overflow: hidden
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
An image inside a inline-block <a> tag, with a border-radius of 50% and overflow: hidden
(this is commonly used for avatars and occurs GitHub a few times)
A red div with position: relative within a parent with overflow: hidden + a border-radius
A blue (background) div within a parent with overflow: hidden + a border-radius
All these are non-conventional elements with a border-radius :^)
iframe to the welcome page
Fun canvas demo
These test the inner border-radius shrinking to accommodate the border
An <img> tag with a border-radius and a border
Clipping text overflow with a border-radius and a border
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The boxes are 50x50px
All round 10px
All round 5,10,15,20px
All round 20px
All round 20px, border widths 1px 5px 10px 12px
All round 15px 5px thick
All round 10px 20px thick
All round 10px 20px thick inset
All round 10px 20px thick outset
Single border with minor radius
Four border with different colors
Border radius with top and bottom zero width
Border radius with left and right zero width
top-left 10px
top-right 10px
bottom-right 10px
bottom-left 10px
200px box, 75px radius
Test truncation:
Box is 50x50, border-radius is 500px