Border radius Experiments

Tests of the shorthand syntax for border radius.

by jamessouth

HTML

<div class="box rc1">5/100</div>

<div class="box rc2">100/5</div>

<div class="box rc3">5/10</div>

<div class="box rc4">5/50</div>

CSS

.box{
    background-color:#EC008C;
    width:100px;
    height:100px;
    margin: 20px auto;
    color:#fff;
    font-family: "Segoe UI",Tahoma,Helvetica,Arial,Verdana,sans-serif;
    font-size:1.6em;
    text-align:center;
    line-height:100px;
}
.rc1{
    border-radius: 5px/100px;
}

.rc2{
    border-radius: 100px/5px;
}

.rc3{
    border-radius: 5px/10px;
}

.rc4{
    border-radius: 5px/50px;
}