<div style="border: 2px solid rgb(213, 93, 95); padding: 10px; width: 300px;">

<h3 align="center">Title of the box</h3>

<p>Text with first letter bolded</p>

<p align="center"><i>Text italic and centered</i></p>
</div>

technical infos

- here you can change thickness (2px) and color of the border (rgb(213, 93, 95)), as well as padding (10px) and width of the box (300px)

- if you don't want any border, put (0px) for the thickness

<div style="border: 2px solid rgb(226, 225, 139); padding: 10px; width: 300px; margin-top: 10px;">

<h3 align="center">Title of the box</h3>

<ul style="margin: 0pt; padding-left: 20px; padding-right: 15px; padding-bottom: 15px;">

<li><b>Bold text</b><br><br></li>

<li>Normal text</li>

</ul>
</div>

technical infos

- here you can change the thickness (2px) and color of the border (rgb(226, 225, 139)), as well as the padding (10px), the width of the box (300px) and the top margin (10px)

- padding : space between the border and the text => padding: 10px;
the padding is added to the width of the box

- if you don't want any border, put (0px) for the thickness

Title of the box

Bold text

Normal text

<DIV style="OVERFLOW: auto; WIDTH: 300px; HEIGHT: 100px">

Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>

</DIV>

technical infos

- here, if the text length is less than 100px high, the box will not roll

- you can change the 2 sizes :
WIDTH: 300px and HEIGHT: 100px

<DIV style="OVERFLOW: auto; WIDTH: 300px; HEIGHT: 100px; scrollbar-arrow-color : #eee8aa; scrollbar-3dlight-color : #8fbc8b; scrollbar-highlight-color : #98fb98; scrollbar-face-color : #006400; scrollbar-shadow-color : #228b22; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000;">

Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>

</DIV>

here the example, as seen with IE :

technical infos

- the color of the scrollbar can only be seen on IE

<DIV style="BORDER-RIGHT: green 3px dotted; PADDING-RIGHT: 5px; BORDER-TOP: purple 3px dashed; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; OVERFLOW: auto; BORDER-LEFT: #ff9900 6px ridge; WIDTH: 300px; PADDING-TOP: 5px; BORDER-BOTTOM: blue 3px double; FONT-STYLE: normal; FONT-FAMILY: verdana; HEIGHT: 200px; BACKGROUND-COLOR: #CCFFFF; TEXT-ALIGN: left";>
(here you put all what you want to have inside the box)

Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>

</DIV>

technical infos

- here rollbox size = WIDTH: 300px; HEIGHT: 200px;

- background : color => BACKGROUND-COLOR: #CCFFFF;
(it's LIGHT BLUE here)

- padding : space between the border and the text => PADDING-LEFT: 10px; the padding is added to the width of the rollbox

- borders : you can change the color, the width, the style =>BORDER-TOP: purple 3px dashed;
- possible values : none, dotted, dashed, solid, double, or 3D borders, (the effect depends on the border-color value) : groove, ridge, inset, outset

<TABLE cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD align=middle width=300 height=20><FONT size=2>&nbsp; <STRONG><FONT color=#ff7200>Title of the box</FONT></STRONG>&nbsp;</FONT></TD>
</TR>
<TR>
<TD vAlign=top align=middle width=300 background=http://background_picture.jpg height=300>
<DIV style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FLOAT: left; MARGIN-LEFT: 20px; OVERFLOW: auto; BORDER-LEFT: 0px; WIDTH: 300px; BORDER-BOTTOM: 0px; HEIGHT: 300px; BACKGROUND-COLOR: transparent">

(here you put all what you want to have inside the box)

Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>
Text <br>

</DIV>
</TD>
</TR>
</TBODY>
</TABLE>

technical infos

- here background picture size = 300 X 300

- background=http://background_picture.jpg
( http://background_picture.jpg is the picture url)

- you can change the picture, but don't forget to put the size of your background picture :
width ans height (in blue in the code on the left)

- you can change the size, color of the "Title of the box"
(in green in the code on the left)

<center>
<fieldset style="border: 1px solid rgb(255, 0, 0); height: 85px; width: 275px;"><legend align="left" style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 15px;">TITLE OF THE FIELDSET</legend><font style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 14px; text-align: center;">TEXT OR PICTURES IN THIS FRAME...</font></fieldset>
</center>

technical infos

- you can change border: 1px solid rgb(255, 0, 0);
(thickness and colour of the border - code in blue on the left)

- you can change the style of the fieldset title: <legend align="left" style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 15px;"> (code in purple on the left)

- you can change dimensions of the fieldset: height: 85px; width: 275px; (code in green on the left)

- you can change style of the text font in the fieldset: font style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 14px; text-align: center;" (code in orange on the left)