Back to CSS Tips
Preview: what the working site looks like.

This has rounded corners in FF2 and higher.

.round_corners {
	float: left;
	padding: 10px 50px 10px 10px;
	margin: 20px 10px 10px;
	background: #ccc;
	-moz-border-radius: 10px 100px 50px 10px;
	-webkit-border-radius: 10px 100px 50px 10px;
	border-radius: 10px 100px 50px 10px;
	border: 1px solid #000;
	text-align: left;
}

This box has a border that fades from gray to black, again...but only in FF2 and higher

#gradient_borders {
    float: left;
    padding: 5px 5px 5px 15px;
    margin: 10px;
    border: 8px solid #000;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    background-color: #ccc;
    text-align: left;
}

Box Model control

By default, box-sizing is set to content-box. With that set, it calculates width and height as specified by CSS 2.1, adding the border-width and border-height and the padding to the size of the box. By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.

Firefox has this feature prefixed with -moz-, resulting in -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing and Opera just accepts plain box-sizing.

These two divs should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support box-sizing.

p[title^="ho"] {background: green;} is the CSS that does it.

This paragraph title contains ho so it should have a green background.

This paragraph title does not contain ho.

This paragraph title contains ho so it should have a green background.

This box should have a gradient background with another background image over top of that. Internet Explorer v.10 doesn't seem to be able to do this.

#multiple_backgrounds {
    width: 600px;
    height: 243px;
    float: left;
    border: 2px solid #00f;>
    text-align: left;
    background: #fff url(bg.jpg) repeat-x, url (slice.jpg) repeat-y;
    }

Drop Shadow

#shadow {
    width: 300px;
    margin: 30px;
    float: left;
    -o-box-shadow: 10px 10px 5px #888;
    -icab-box-shadow: 10px 10px 5px #888;
    -khtml-box-shadow: 10px 10px 5px #888;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    padding: 5px 5px 5px 15px;
    background-color: #eee;
    text-align: left;
}

Multi-column layout

W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layout is actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.

Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows:

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

Which results in the following:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit.

Nullam a nibh. Nam quis diam non ligula pharetra sagittis. Maecenas rhoncus est vel tortor. Fusce in sem. Mauris in risus id lorem volutpat elementum. Pellentesque adipiscing laoreet ligula. Suspendisse erat. Donec porta auctor lacus. Vestibulum cursus, orci eget mollis ullamcorper, enim massa elementum dui, sed consequat nibh nisi eu tellus. Proin consequat. Aliquam tristique, ante vitae molestie posuere, tortor eros consectetuer augue, vitae accumsan erat ipsum in sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae

The next example is done with column-count, and has the following code:

-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;

Which in turn results in the following:

Cras urna metus, aliquam sed, condimentum eget, pellentesque scelerisque, massa. Nullam et est id augue blandit tincidunt. Ut consectetuer, justo eleifend varius facilisis, tortor lorem pharetra nunc, ac sodales purus nunc semper tortor. Integer nec urna. Praesent scelerisque, ipsum nec aliquet volutpat, sem ante sagittis risus, sed condimentum magna libero luctus elit. Donec pede purus, hendrerit non, laoreet vel, porta ut, neque. Cras eu lacus. Pellentesque tempus mattis magna. Nullam id nisl. Quisque dolor lorem, commodo ac, pharetra sed, nonummy nec, nulla. Mauris purus. Suspendisse eget mauris nec justo eleifend vestibulum. Nunc ut eros sed pede pretium congue. Etiam in elit ut nisi ultrices hendrerit. Cras vulputate ultrices quam. Curabitur venenatis. Cras sed nisi.

Donec feugiat facilisis libero. Nullam euismod auctor risus. Nulla facilisi. Praesent purus enim, dignissim a, rhoncus sit amet, aliquet mattis, metus. Suspendisse sit amet justo posuere magna tincidunt semper. Pellentesque nisl. Curabitur eu eros vel turpis porttitor suscipit. Nullam pellentesque, enim sit amet tincidunt accumsan, ante lorem commodo nisi, sed facilisis quam diam quis risus. Vestibulum egestas gravida massa. Duis varius enim ac sem. Donec bibendum est eu ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

column-rule isn’t implemented yet, which is the shorthand for column-rule-color, column-rule-style and column-rule-width, but should allow for a sort of border between the columns in the future. Another feature which isn’t implemented yet is column-space-distribution, this should describe how to distribute the space between the columns if there’s rest space left.

Box 1
CSS3 Transform
Box 2
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>      
    <div id="container">
<div class="round_corners">
	<p>This has rounded corners in FF2 and higher.</p>
<pre>
.round_corners {
	float: left;
	padding: 10px 50px 10px 10px;
	margin: 20px 10px 10px;
	background: #ccc;
	-moz-border-radius: 10px 100px 50px 10px;
	-webkit-border-radius: 10px 100px 50px 10px;
	border-radius: 10px 100px 50px 10px;
	border: 1px solid #000;
	text-align: left;
}
</pre>
<!--end rounded_corners--></div>
    <div id="gradient_borders">
    	<p>This box has a border that fades from gray to black, again...but only in FF2 and higher</p>
<pre>
#gradient_borders {
    float: left;
    padding: 5px 5px 5px 15px;
    margin: 10px;
    border: 8px solid #000;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    background-color: #ccc;
    text-align: left;
}
</pre>
    <!--end gradient_borners--></div>
                <div id="box">
                    <div class="split">
                        <h3>Box Model control</h3>
                            <p>
                                By default, box-sizing is set to content-box. With that set, 
                                it calculates width and height as specified by CSS 2.1, adding the border-width 
                                and border-height and the padding to the size of the box. By setting it to 
                                border-box, you can force the browser to instead render the box with the 
                                specified width and height, and add the border and padding inside the box.
                            </p>
                    </div>
                    <div class="split">
                        <p>
                            Firefox has this feature prefixed with -moz-, resulting in -moz-box-sizing. 
                            Safari 3 / WebKit uses -webkit-box-sizing and Opera just accepts plain box-sizing.
                        </p>
                        <p>
                            These two divs should appear side by side, each (including borders) 50% of the content 
                            width of their container. If instead they are stacked one on top of the other then your 
                            browser does not support box-sizing.
                        </p>
                    </div>
                <!--ends box--></div>
<div class="round_corners">
    <p><code>p[title^="ho"] {background: green;}</code> is the CSS that does it.</p>
     	<p title="house">This paragraph title contains ho so it should have a green background.</p>
        	<p>This paragraph title does not contain ho.</p>
     	        <p title="hot">This paragraph title contains ho so it should have a green background.</p>
<!--closes round corners--></div>
			<div id="multiple_backgrounds">
                <p>
                    This box should have a gradient background with another background
                    image over top of that. Neither FireFox v.3.1 Beta 2 nor Internet 
                    Explorer v.10 seem to be able to do this.
                </p>
<pre>
#multiple_backgrounds {
    width: 600px;
    height: 243px;
    float: left;
    border: 2px solid #00f;>
    text-align: left;
    background: #fff url(bg.jpg) repeat-x, url (slice.jpg) repeat-y;
    }
</pre>
            <!--end multiple_backgrounds--></div>
            	<div id="shadow">
                <h3>Drop Shadow</h3>
                <p>
                Again, works great in FireFox...
                </p>
<pre>
#shadow {
    width: 300px;
    margin: 30px;
    float: left;
    -o-box-shadow: 10px 10px 5px #888;
    -icab-box-shadow: 10px 10px 5px #888;
    -khtml-box-shadow: 10px 10px 5px #888;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    padding: 5px 5px 5px 15px;
    background-color: #eee;
    text-align: left;
}
</pre>
                <!--end shadow--></div>
<div id="columns">
<h1>Multi-column layout</h1>
<p>W3C offers a new way to arrange text &#8220;news-paper wise&#8221;, in columns. <a href="http://www.w3.org/TR/css3-multicol/" onclick="javascript:urchinTracker('/outbound/article/http://www.w3.org/TR/css3-multicol/');">Multi-column layout</a> is actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by <code>column-width</code>, the latter by <code>column-count</code>. To create a space between the columns, you need to specify a width for <code>column-gap</code>.</p>
<p>Multi-column layout is <strong>currently only supported in Mozilla based browsers and Safari 3</strong>, who have prefixed the properties with respectively <code>-moz-</code> and <code>-webkit-</code>. The example below is done with <code>column-width</code>, the CSS for it is as follows:</p>

<pre>
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
</pre>
<p>Which results in the following:</p>
<div id="test1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit.</p>
<p>Nullam a nibh. Nam quis diam non ligula pharetra sagittis. Maecenas rhoncus est vel tortor. Fusce in sem. Mauris in risus id lorem volutpat elementum. Pellentesque adipiscing laoreet ligula. Suspendisse erat. Donec porta auctor lacus. Vestibulum cursus, orci eget mollis ullamcorper, enim massa elementum dui, sed consequat nibh nisi eu tellus. Proin consequat. Aliquam tristique, ante vitae molestie posuere, tortor eros consectetuer augue, vitae accumsan erat ipsum in sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
</div>
<p>The next example is done with <code>column-count</code>, and has the following code:</p>
<pre>
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
</pre>
<p>Which in turn results in the following:</p>

<div id="test2">
<p>Cras urna metus, aliquam sed, condimentum eget, pellentesque scelerisque, massa. Nullam et est id augue blandit tincidunt. Ut consectetuer, justo eleifend varius facilisis, tortor lorem pharetra nunc, ac sodales purus nunc semper tortor. Integer nec urna. Praesent scelerisque, ipsum nec aliquet volutpat, sem ante sagittis risus, sed condimentum magna libero luctus elit. Donec pede purus, hendrerit non, laoreet vel, porta ut, neque. Cras eu lacus. Pellentesque tempus mattis magna. Nullam id nisl. Quisque dolor lorem, commodo ac, pharetra sed, nonummy nec, nulla. Mauris purus. Suspendisse eget mauris nec justo eleifend vestibulum. Nunc ut eros sed pede pretium congue. Etiam in elit ut nisi ultrices hendrerit. Cras vulputate ultrices quam. Curabitur venenatis. Cras sed nisi.</p>
<p>Donec feugiat facilisis libero. Nullam euismod auctor risus. Nulla facilisi. Praesent purus enim, dignissim a, rhoncus sit amet, aliquet mattis, metus. Suspendisse sit amet justo posuere magna tincidunt semper. Pellentesque nisl. Curabitur eu eros vel turpis porttitor suscipit. Nullam pellentesque, enim sit amet tincidunt accumsan, ante lorem commodo nisi, sed facilisis quam diam quis risus. Vestibulum egestas gravida massa. Duis varius enim ac sem. Donec bibendum est eu ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
<p><code>column-rule</code> isn&#8217;t implemented yet, which is the shorthand for <code>column-rule-color</code>, <code>column-rule-style</code> and <code>column-rule-width</code>, but should allow for a sort of border between the columns in the future. Another feature which isn&#8217;t implemented yet is <code>column-space-distribution</code>, this should describe how to distribute the space between the columns if there&#8217;s rest space left.</p>
<!--end columns--></div>
        <div id="transformContainer">
                <div id="box1">
                    Box 1<br />
                    CSS3 Transform
                <!--end box1--></div>
            <div id="box2">Box 2</div>
        <!--end transformContainer--></div>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 100%;
	overflow: auto;
	margin: 0 0 1500px 0;
}
.round_corners {
	width: 380px;
	float: left;
	padding: 10px 50px 10px 10px;
	margin: 20px 10px 10px;
	background-color: #ccc;
	-moz-border-radius: 10px 100px 50px 10px;
	-webkit-border-radius: 10px 100px 50px 10px;
	border: 1px solid #000;
	text-align: left;
}
#gradient_borders{
	width: 600px;
	float: left;
	padding: 5px 5px 5px 15px;
	margin: 40px 10px 10px;
	border: 8px solid #000;
	-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	background-color: #ccc;
	text-align: left;
}
/*************new box model controls*************/
		#box {
			width: 600px;
			border: 10px solid #900;
			float: left;
		}
		.split {
			box-sizing: border-box; 
			-o-box-sizing: border-box; 
			-icab-box-sizing: border-box; 
			-khtml-box-sizing: border-box; 
			-moz-box-sizing: border-box; 
			-webkit-box-sizing: border-box;
			width:50%;
			float:left;
			padding: 2px;
			border: 10px silver ridge;
			text-align: left;
		}
/*********end new box model controls*************/
/*************title backgrounds******************/
	p[title^="ho"] {background: green;}
/*************end title backgrounds**************/
/********Layering multiple background images*******************/
#multiple_backgrounds {
	width: 600px;
	margin: 25px 0;
	padding: 10px;
	float: left;
	border: 2px solid #00f;
	text-align: left;
	background: url(decoration.png) left top no-repeat, url(old_paper.jpg) left top no-repeat;
}
#multiple_backgrounds p {margin: 30px 0 50px 180px;}
/********end Layering multiple background images***************/
/*************drop shadow**************************************/
#shadow{
	width: 420px;
	margin: 30px;
	float: left;
	-o-box-shadow: 10px 10px 5px #888;
	-icab-box-shadow: 10px 10px 5px #888;
	-khtml-box-shadow: 10px 10px 5px #888;
	-moz-box-shadow: 10px 10px 5px #888; /*this is the line that does it for FireFox*/
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 10px 10px 5px #888;
	padding: 5px 5px 5px 15px;
	background-color: #eee;
	text-align: left;
}
/**************end drop shaow**********************************/
/***************columns****************************************/
	#columns {
	width: 800px;
	clear: both;
	margin: 20px auto;
	padding: 10px;
	background: #CCCCCC;
	text-align: left;
	}
			#test1, #test2 {
				background-color: #fff;
				column-gap: 1em;
				-o-column-gap: 1em;
				-icab-column-gap: 1em;
				-khtml-column-gap: 1em;
				-moz-column-gap: 1em;
				-webkit-column-gap: 1em;
				padding: 5px;
			}
			#test1 {
				column-width: 13em;
				-o-column-width: 13em;
				-icab-column-width: 13em;
				-khtml-column-width: 13em;
				-moz-column-width: 13em;
				-webkit-column-width: 13em;
			}
			#test2 {
				column-count: 3;
				-o-column-count: 3;
				-icab-column-count: 3;
				-khtml-column-count: 3;
				-moz-column-count: 3;
				-webkit-column-count: 3;
			}
/******************end columns*******************/
/*******************transform********************/
#transformContainer {
	width: 800px;
	margin: 100px auto;
	background: #f93;
}
	#box1 {
		height: 180px;
		width: 280px;
		margin: 30px auto;
		padding: 20px;
		background: #999;
		transform: rotate(30deg);
		-webkit-transform: rotate(30deg); /* Safari and Chrome */
		-o-transform: rotate(30deg); /* Opera */
		-moz-transform: rotate(30deg); /* Firefox */
	}
	#box2 {
		height: 200px;
		width: 300px;
		margin: 30px auto;
		background: #f00;
		transform: skew(-40deg,-10deg);
		-webkit-transform: skew(-40deg,-10deg); /* Safari and Chrome */
		-o-transform: skew(-40deg,-10deg); /* Opera */
		-moz-transform: skew(-40deg,-10deg); /* Firefox */	
	}