Using Box with Rounded Corners

Text within a rounded corner box
To get the *.gif for the rounded corners use :
cornershop

Another box
The content could be as big as we need. Just define the width inside the style of the first div box.
The box will grow as necessary.

The HTML

I use a div container, and 4 classes, box, boxtop, boxbottom and boxcontent :

<div class="box"
style="font-weight: bold; width: 360px;
color: white; text-align: center;">

<div class="boxtop"><div>Text top</div></div>

<div class="boxcontent">Text content</div>

<div class="boxbottom"><div>Text bottom</div></div>

</div>

The CSS

The CSS use the 4 *.gif files as background, to render the rounded corners :

.box {
background: #D8261B;
}
.boxtop {
background: url(path/ne-red.gif) no-repeat top right;
}
.boxtop div {
height: 10px;
background: url(path/nw-red.gif) no-repeat top left;
}
.boxbottom {
background: url(path/se-red.gif) no-repeat bottom right;
}
.boxbottom div {
height: 10px;
background: url(path/sw-red.gif) no-repeat bottom left;
}
.boxcontent {
padding: 0px 10px 0px 10px;
}

Loading the Style Sheet

Write this javascript in the first editable section of the page :

Using CSS and a Picture as Background

From the original CSS, change class name : content must be gcontent, wrapper must be gwrapper (these class names are used by GPC)
If you use h1 and h2 tags, create a class gh1 and gh2 to override the style from GPC for these tags