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

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)

All these are non-conventional elements with a border-radius :^)

iframe to the welcome page

Fun canvas demo

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