Create Curved Objects on Blog

Have you see a curved object on my blog? Like this... Full Blog Tricks Above is one of the variations of curved objects or can be called &qu...

Have you see a curved object on my blog? Like this...
Full Blog Tricks
Above is one of the variations of curved objects or can be called "BORDER-RADIUS". With border-radius, our blog will look flexible. Unfortunately, border-radius can't support on Internet Explore. Now, we will learn and try to create curved objects on blog. The curved objects are separated by the browser.

Mozilla Firefox
<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">FULL BLOG TRICKS</div>

Safari
<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

Opera 10.5
<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

OK, that's all friend. Hopefully useful...

Hot in Week

Popular

Archive

item