Space Impact

Rounded corners with CSS

Kode:

W3C Specification Mozilla Implementation
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

Contoh penggunaannya:
#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

Reff: CSS3

No comments:

Post a Comment