### 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
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