Tuesday, March 15, 2011

Curve shape menu button creation (Rounded corner)


Most of beginner facing problem with website navigation in design oriented ... While creating navigation button in rounded corner shape, 
yes 
we have simple idea to create rounded corner button in one line of css. 

just follow this lines with your code:

<div style="-moz-border-radius:8px 8px 8px 8px; padding:5px 0px 5px 20px; background-color:#666; width:100px;">
    <a href="#" target="_self" style="color:#FFF; text-decoration:none;">
        Test Button
    </a>
</div>

here -moz-border-radius:8px 8px 8px 8px  syntax using to make rounded shape....
we have to define the button size using  width and we need to make background color to display the button in rounded shape.

Nite :
It might not work in some browsers so instead of above code we can use following code :
moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;

No comments: