Demo: border-radius

This page demonstrates various aspects of PIE's border-radius rendering. Load this page in IE 6-8 to see it in action.

Uniform

border-radius: 10px;

border-radius: 1em;

border-radius: 20%;

Different per corner

border-radius: 5px 10px 15px 20px;

border-radius: 0.5em 1em 1.5em 2em;

border-radius: 10% 20% 30% 40%;

Single corner

border-radius: 20px 0 0 0;

border-radius: 0 20px 0 0;

border-radius: 0 0 20px 0;

border-radius: 0 0 0 20px;

X and Y

border-radius: 30px / 10px;

border-radius: 3em / 1em;

border-radius: 20% / 50%;

border-radius: 5px 10px 15px 20px / 20px 15px 10px 5px;

Uniform with border

border-radius: 10px; border: 5px solid #000;

border-radius: 10px; border: 5px dotted #000;

border-radius: 10px; border: 5px dashed #000;

border-radius: 10px; border: 5px double #000;

border-radius: 10px; border: 5px groove #000;

border-radius: 10px; border: 5px ridge #000;

border-radius: 10px; border: 5px inset #000;

border-radius: 10px; border: 5px outset #000;

Differing border widths

border-radius: 10px; border: solid #000; border-width: 6px 9px 6px 3px;

border-radius: 10px; border: dotted #000; border-width: 6px 9px 6px 3px;

border-radius: 10px; border: dashed #000; border-width: 6px 9px 6px 3px;

border-radius: 10px; border: double #000; border-width: 6px 9px 6px 3px;

border-radius: 10px; border: groove #000; border-width: 6px 9px 6px 3px;

border-radius: 10px; border: ridge #000; border-width: 6px 9px 6px 3px;

border-radius: 10px; border: inset #000; border-width: 6px 9px 6px 3px;

border-radius: 10px; border: outset #000; border-width: 6px 9px 6px 3px;

Border thicker than radius

border-radius: 10px; border: 20px solid #000;

border-radius: 10px; border: 20px dotted #000;

border-radius: 10px; border: 20px dashed #000;

border-radius: 10px; border: 20px double #000;

border-radius: 10px; border: solid #000; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: dotted #000; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: dashed #000; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: double #000; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: groove #000; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: ridge #000; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: inset #000; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: outset #000; border-width: 3px 20px 9px 15px;

Zero-width borders

border-radius: 10px; border: 20px solid #000; border-top-width: 0;

border-radius: 10px; border: 20px dotted #000; border-right-width: 0;

border-radius: 10px; border: 20px dashed #000; border-bottom-width: 0;

border-radius: 10px; border: 20px double #000; border-left-width: 0;

border-radius: 10px; border: 20px groove #000; border-top-width: 0;

border-radius: 10px; border: 20px ridge #000; border-right-width: 0;

border-radius: 10px; border: 20px inset #000; border-bottom-width: 0;

border-radius: 10px; border: 20px outset #000; border-left-width: 0;

Differing border colors

border-radius: 10px; border: 20px solid; border-color: red green blue orange;

border-radius: 10px; border: 20px dotted; border-color: red green blue orange;

border-radius: 10px; border: 20px dashed; border-color: red green blue orange;

border-radius: 10px; border: 20px double; border-color: red green blue orange;

border-radius: 10px; border: 20px groove; border-color: red green blue orange;

border-radius: 10px; border: 20px ridge; border-color: red green blue orange;

border-radius: 10px; border: 20px inset; border-color: red green blue orange;

border-radius: 10px; border: 20px outset; border-color: red green blue orange;

Differing border colors and styles

border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: solid dotted dashed double;

border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: groove ridge inset outset;

Differing border colors and widths

border-radius: 10px; border: solid; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: dotted; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: dashed; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: groove; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: ridge; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: inset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border: outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

Differing border colors, styles, and widths

border-radius: 10px; border-style: solid dotted dashed double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

border-radius: 10px; border-style: groove ridge inset outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;

Arrow-ish

width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-top-color: blue;

width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-right-color: blue;

width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-bottom-color: blue;

width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-left-color: blue;