Rounded Corner

There are three ways commonly used by the designer if you want to form a rounded background (elliptical) or something that clearly is a cool name Rounded Corner. Value the stated radius. And because it uses basic CSS from the property until the selector, this trick can be used on all templates and themes.

1. As stated Background Images Directly

The percentage could use up to 40%. This is the easiest stage of the three stages which I will explain. There are three extensions that are often used:

PNG: Usually used if the background behind the color but not the images. Saving images with this extension can be made transparent on the rounded effect. All the major browsers already support PNG transparency except IE6.

GIF: Almost similar to the PNG extension, only the resulting image quality is less though with a smaller size so that the loading pretty quickly.

JPG: Used if the designer already knows the background color of the target. Since this extension does not support transparency, so if the images created in Photoshop (* transparent background) and saved with the extension of this, the background will be white.

There are interesting from the third party tools that provide manufacturing services for free rounded corners. Just try to visit www.roundedcornr.com.

Examples of its application can be viewed at the following excerpt CSS ID :

#menubottom{
width:100%;
margin:0 0 0px;
height:46px;
background:#40534a url(http://img706.imageshack.us/img706/8813/navmenu2radius7.png) no-repeat;
}

2. Property

In addition to step one above, this is the second easiest. It could even be said to be easier, if for those who can not use Photoshop. From some of my surgical templates, presentation of the use of this property could achieve the 35%. Some of the major browsers (Mozilla, Chrome, Safari and Opera) are supported except for the IE family.

 

Following his property:

• moz-border-radius:7px; /* untuk mozilla FF & Universal*/
• webkit-border-radius:7px; /* untuk Safari */

Examples of its application can be seen on CSS excerpts below :

#header1{
background: #8a9c8e;
margin: 10px 0;
text-align: center;
color:$pagetitlecolor;
width:490px;
height:90px;
float:right;
overflow:hidden;
-moz-border-radius:7px;
-webkit-border-radius:7px;

3. CSS Selector

The trick quite complicated. Perhaps because of that, how is rarely used in a template-based personalized design. Although complicated, but works fine on all browsers. Stages still utilize images are saved with a specific extension (* note Step 1 above). The position is governed by the CSS subsequent placement section called HTML. There is one blog that has never explained how this application. I've forgotten who wrote it, a clear link here. Sorry, I can not explain here because it's too long ...

The setting margin / padding is very influential. My advice, preferably air-margin value "0" (zero).

Do you Like this Post ?

Get Free Email Updates Daily!	Follow us!

Posted in: Info Blogging,Rounded Corner,Tips