Rounded corners and Cross Browser with CSS

Rounded corners and Cross Browser with CSS

CSS plays a dramatic role nowadays in web development, it allows web developer/designers to easily use or create rounded corners in their designs instead of images, this way it will help loads the website faster, clean code and most of all search engine friendly.

Here’s a basic example BOX1:

This is a sample rounded corner box

CSS File:

#box1{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;

	border: solid 1px #eeeeee;
	padding: 10px;
	background-color:#CCCCCC;
	text-align:center;

        /* http://www.archiemercader.com/ */
}

HTML File:

<div id="box1">This is a sample rounded corner box</div>

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

THE SYNTAX

border-*-*-radius: [ | <%> ] [ | <%> ]?

Example:

border-top-left-radius: 5px 10px;
border-bottom-right-radius: 5% 10%;
border-top-right-radius: 5px;

CSS3 is compatible with MSIE, Firefox, Chrome, Safari and Opera

Another example BOX2:

This is a sample rounded corner box with shadow

CSS File:

#box2{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;

	box-shadow: 2px 2px 2px #333333;
	-moz-box-shadow: 2px 2px 2px #333333;
	-webkit-box-shadow: 2px 2px 2px #333333;
	-khtml-box-shadow: 2px 2px 2px #333333;

	border: solid 1px #eeeeee;
	padding: 10px;
	background-color:#CCCCCC;
	text-align:center;

        /* http://www.archiemercader.com/ */
}

HTML File:

<div id="box2">This is a sample rounded corner box with shadow</div>

OTHER INTERESTING EXAMPLES

Border-radius:

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;

Shadow:

	box-shadow: 2px 2px 2px #333333;
	-moz-box-shadow: 2px 2px 2px #333333;
	-webkit-box-shadow: 2px 2px 2px #333333;
	-khtml-box-shadow: 2px 2px 2px #333333;

Opacity:

	filter:alpha(opacity=75);
	opacity: 0.75;
	-moz-opacity:0.75;
	-webkit-opacity: 0.75;
	-khtml-opacity: 0.75;
32% off New Product orders at GoDaddy.com! Expires 7/30/13.

3 Comments

  1. its not working with IE8 lots of people working on old browser

  2. do you mean IE6? yes indeed as it is not yet compatible with HTML5, it should be working with IE8 though

  3. interested css code, so I guess I’ll add you back to my everyday bloglist. You deserve it my friend. :)

Leave a Reply