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



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