The css rounded div using Moz border radius below will works in most modern web browsers, irefox, Safari/Chrome, Opera and even IE9.
The articles source of this tutorials says that they are the basics example but for me, Hello.... that is very advance since my knowledge in this field is at the buttom beginning, but anyway I have tested the output of the following codes personally and as you see now I implemented it in this blog...
Here they are, the example codes of Cross Browser Rounded Div CSS Using Moz Border Radius :
#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;
}
The all mentioned code will produces the following results:
While for this blog ( sumbercara.blogspot.com ) i`m using their combination as the following css for rounded div using moz border radius
-moz-border-radius-bottomright: 25px 50px;
-moz-border-radius-topright: 25px 50px;
-moz-border-radius-bottomleft: 25px 50px;
-moz-border-radius-topleft: 25px 50px;
border-bottom-right-radius: 25px 50px;
Thank you for visiting me... by the way you can always drop your comment to help me improve my css skill...
Sumber cara | Cross Browser Rounded Div CSS Using Moz Border Radius
You might also Want to know :
Background CSS | CSS HTML Basic Cheats sheet
Keuntungan Menabung / Investasi Emas | Gold Investment News
1000 Tombs Discovered In Columbia | National Geo News