Boxes & Borders

There is a slight difference between the code below and what has been used to create the boxes. The boxes are wider (350 not 200) and different border styles have been added.

Background Colour #ccffcc

CSS

.bordered {
float:left;
border: dashed 2px black;
width: 350px;
margin: 0px 0px 10px 10px;
padding: 10px;
}

Background Colour #ffffcc;

CSS

.bordered {
float:left;
border: dotted 2px black;
width: 350px;
margin: 0px 0px 10px 10px;
padding: 10px;
}

Background Colour #ccccff

CSS

.bordered {
float:left;
border: solid 2px black;
width: 350px;
margin: 0px 0px 10px 10px;
padding: 10px;
}

Background Colour #ffccff

CSS

.bordered {
float:left;
border-style: double
width: 350px;
margin: 0px 0px 10px 10px;
padding: 10px;
}

.bordered {
border: dotted 2px black;
width: 200px;
margin: 6px 3px 6px 3px;
padding: 10px;
}

.info { background-color: #ffccff; }
.feature { background-color: #ccffcc; }
.warning { background-color: #ffffcc; }
.coolness { background-color: #ccccff; }

HTML

<div class="info bordered">
</div>

<div class="bordered feature">
</div>

<div class="bordered warning">
</div>

<div class="coolness bordered">
</div>