November 19th, 2008 | |
Posted in CSS
Rounded corners can be done very easily, and offer a nice and round effect to otherwise nasty boxes. With just a few images, and a couple lines of CSS we can spice up our boxes, and break out of the right-angle madness!
1. This is the old style of just having nice colorful <div> on your page. And now we will gonna change it from old style to the new style. We will start here.
<!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=iso-8859-1″ />
<title>Rounded Corners</title>
</head>
<style type=”text/css”>
#container
{
background:#333333;
color:#FFFFFF;
font:12px Arial, Helvetica, sans-serif;
line-height:150%;
margin:0 auto;
padding:20px;
width:650px;
}
</style>
<body>
<div id=”container”>
Lorem ipsum vel ex nonumy meliore deleniti, eam prima soleat diceret id. Ne zzril aliquyam perfecto vel.
Lorem aliquam abhorreant duo cu, adhuc invidunt convenire id vix, regione aliquyam constituam mei ex. Cu duo congue cetero euripidis.
Est ad vitae tamquam adipisci, ne erant discere invenire qui, ad inani fabulas albucius vel. Ut ubique labore melius pro, cu vix dicat facilisi senserit.
Ut sit persius ceteros postulant, his illum fastidii scriptorem no.
</div>
</body>
</html>
More »
Popularity: 36% [?]
Tags:
how-to,
html,
rounded corners,
styles 
