PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
Rounded corners in CSS3

The usual way of showing rounded corners of rectangle / square in web pages is to slice and export  these corner images from fireworks / photoshop. This tutorial deals with how to create rounded corners using styles / CSS. Which exactly means that we will not be using any images for the same. :)

Syntax

.rounded-corners
{
            border: 1px solid #666666;
            -webkit-border-radius: 9px;
            -khtml-border-radius: 9px;     
            -moz-border-radius: 9px;
            border-radius: 9px;
}


Syntax explanation:

This style assigns 2 attributes:

  • Width / color / stroke for the border.
  • Border radius, which is proportional to the extent of  rounded corners we want. 
    Higher value of 'border-radius' will increase the roundedness of corners.

In the above code, we have covered border radius syntax for Webkit, Konqueror and Mozilla browsers.     

The output of the above code is shown below









Limitations:

The above rounded corner style is not supported by IE browsers.

Tags: Style / CSS3 to create rounded corners, rounded corners
















Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2011 Imajine.