How To Css3 Round Corner Tutorials

What is CSS 3?

CSS 3 is a new version of css. If you know the basic CSS its easy to you how to css3 . In 2005 , a new dimension opened for the developer and designer for coming CSS3. Many complex work can be done easily by the help of CSS3 like round corner. Now CSS3 mostly used by many developer and designer are using round corners instead of using Photoshop images. All of us excited to get the new features of CSS3 on our hands  – such as,  the text shadows, borders with images, opacity, multiple backgrounds, etc. But it is a matter of fact that every selector of CSS3 rounded corners generator don’t supported yet . That doesn’t mean that we can’t make some fun with CSS3. This is the how to css3 .

how to css3 ?

Opera and Safari have been leading the way when it comes to CSS 3 features, but Firefox 3 packs in a few and 3.1 promises to bring Firefox alongside the others. At first we are going to learn about Rounded corner system of CSS3 rounded corner generator.

how to css3  Rounded corner

The border-radius property used to make rounded corner by CSS 3. It just make round the 4 corner of any box. The box is made by only a simple div tag.

Example:

<html>

<head><title>   </title>

<style type="text/css">

div{

background-color: #666;

color: #fff;

line-height: 20px;

width: 200px;

padding: 10px;

border-radius: 10px;

}

</style>

</head>

<div> The border-radius property.

</div>

</html>

Output:  how to css3 border-radius

 

An extra example for how to css3  :

I have used table tag here. This is a different type of table. Try to be think different for be a different man .

<html>

<head><title>   </title>

<style type="text/css">

div{

background-color: #666;

color: #fff;

line-height: 20px;

width: 280px;

padding: 10px;

border-radius: 10px;

}

#other{                background-color: #afb0aa;

color: #fff;

line-height: 20px;

width: 280px;

padding: 10px;

border-radius: 10px;

}

#one{position: absolute; left:200px;

}

</style>

</head>

<div> <table >

<tr><td>I am a selector. </td>

<td id="one">I am a property. </td></tr>

</table>

</div><br/>

<div id="other"> <table >

<tr><td>I am a selector. </td>

<td id="one">I am a property. </td></tr>

</table>

</div><br/>

<div> <table >

<tr><td>I am a selector. </td>

<td id="one">I am a property. </td></tr>

</table>

</div><br/>

<div id="other"> <table >

<tr><td>I am a selector. </td>

<td id="one">I am a property. </td></tr>

</table>

</div>

</html>

Output:  how to css3 table-rounded-border

In the above tutorial we have learned very well that applying how to css3 in a web page. Programmers are very lazy and week in photoshoped work. CSS3 opened a new door for the frontednd developers. Instead of using photoshop we can easily apply how to css3 in a website such as navigation menu, border, border radius, text shadows etc. Happy Learning !!!

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.