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 :

<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';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for rounded corners';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>



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