CSS3 is showing amazing leaps in the way in which designers can now manipulate various on page effects within CSS without using design software such as Fireworks and Photoshop. Today we are looking at creating rounded corners on a simple web banner using CSS3 border-radius.

So here is the standard web banner contained within a square <DIV> tag 400px x 100px.

Here is the same <DIV> tag and web banner with the addition of a few lines of CSS3 coding.

It’s so simple but really effective and time saving. Normally designers would need to create the rounded corner effect on the image and with a clear background but now we can code the effect directly in CSS.

Here is the CSS/HTML code used in the CSS3 rounded border-radius example above:

**CSS**

web-banner img{

/*Border Radius controls – Edit to change effect*/

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

}

**HTML**

<div id=”web-banner”>

<img src=”http://www.freshdeveloper.com/fd/fresh-blog/wp-content/uploads/2010/11/border-radius.jpg” width=”400″ height=”100″ alt=”CSS Rounded Border-Radius” />

</div>