CSS3 Border Styling

Here we can see an example of the CSS3 border-radius selector and the border width property.

The border-radius selector allows us to set and define rounded corners to block elements.

The drop-downs below allow you to change the border-radius and border width characteristics by changing the class definitions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing, ipsum ac lacinia tincidunt, tortor elit ullamcorper arcu, a rutrum eros quam sit amet nunc. Duis eu risus lacus. Donec aliquet mauris ullamcorper purus euismod imperdiet. Curabitur fermentum posuere ante quis pretium. Sed dictum, tellus vel convallis tempus, ligula magna mattis tellus, sed facilisis orci neque a purus. Ut at mauris dolor, ac sagittis dui. Nulla facilisi. Vivamus condimentum dui eu nulla sagittis condimentum laoreet dolor commodo. Integer nec turpis sed odio eleifend consequat in sed libero. Proin felis est, sollicitudin vel sodales ac, congue volutpat dolor. Donec at nisi ac urna luctus condimentum ac vel justo. Fusce consectetur urna erat.

You can copy the page html from the textarea below and save it to your local system.

<!DOCTYPE HTML>
<html>
<head>

<title>CSS3 Border Styling</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

/*for main div, not part of the fluid shadows css*/
#main	{margin-top:10px;}
h1,select,textarea,button { margin-left: 10px;}

body {font-family:arial,helvetica,sans-serif;font-size 1em;}
.h1 {font-size:1.2em;font-weight:bold;border-bottom:2px solid #777;}
.rounded5 {
	border-radius:5px;
	-moz-border-radius:5px; /* Firefox 3.6 and earlier */
	padding:10px;
	margin:10px 40px 40px 40px;
}

.rounded10 {
	border-radius:10px;
	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
	padding:15px;
	margin:10px 40px 40px 40px;
}

.rounded25 {
	border-radius:25px;
	-moz-border-radius:25px; /* Firefox 3.6 and earlier */
	padding:30px;
	margin:10px 40px 40px 40px;
}

.rounded40 {
	border-radius:40px;
	-moz-border-radius:40px; /* Firefox 3.6 and earlier */
	padding:40px;
	margin:10px 40px 40px 40px;
}

.border1 {
	border: 1px solid #000;
}

.border2 {
	border: 2px solid #000;
}

.border4 {
	border: 4px solid #000;
}

</style>

</head>

<body>

<div class='rounded25 border1' id='rounded'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing, ipsum ac lacinia tincidunt, tortor elit ullamcorper arcu, a rutrum eros quam sit amet nunc. Duis eu risus lacus. Donec aliquet mauris ullamcorper purus euismod imperdiet. Curabitur fermentum posuere ante quis pretium. Sed dictum, tellus vel convallis tempus, ligula magna mattis tellus, sed facilisis orci neque a purus. Ut at mauris dolor, ac sagittis dui. Nulla facilisi. Vivamus condimentum dui eu nulla sagittis condimentum laoreet dolor commodo. Integer nec turpis sed odio eleifend consequat in sed libero. Proin felis est, sollicitudin vel sodales ac, congue volutpat dolor. Donec at nisi ac urna luctus condimentum ac vel justo. Fusce consectetur urna erat.</p>
</div>

</body>

</html>