Using Box with Rounded Corners

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

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.


  • 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>



  • 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 :

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE/style_corners.css'; = 'screen, print';
cssNode.title = 'style sheet for rounded corners';

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

Another Way

Rounded Corners with CSS and a Background

The Box is a liquid box changing width when the window size change

I use this work for this example : Even More Rounded Corners

We can fill the Box with some links

Visit the author : Scott Schiller

Copy the CSS file for this example

More informations

One Day - One Label - One Wine