Rounded Corner Effects

Posted by :)

Rounded corner effects to the blocks in HTML structure enhance the beauty of blogs and we have achieved this effect by using corner images in the past, but the CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Let’s start with a very basic example,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS Rounded Corners Without Images</title>

<style>

.w_corners {

    width: 500px;

    margin: 0px auto;

    background-color: #000;

    color: #fff;

    padding: 10px;

    /* Border Radius Style */

    border-radius: 15px;

    /* Mozilla Firefox Extension */

    -moz-border-radius: 15px;

}

</style>

</head>

<body>

<!-- Begin Rounded Corners Block -->

<div class="w_corners">CSS Rounded Corners Without Images</div>

<!-- End Rounded Corners Block -->

</body>

</html>

The round corner will shown given below

If you need more help then visit http://www.css3maker.com/border-radius.html. Here you will get the code of rounded corner shap with the help of tool. css3maker.com is the best site i have ever discovered for generated code of round shape.