View Full Version : Resolved curved box trouble

11-19-2009, 05:18 PM
Hi all,

Iv been trying to create a curved box that has a little fade at the bottom of the content area before coming to the foot of the box, I would also like the content to overlap some of the fade. The problem is Iv tried to create this effect but just cant seem to get it.

I have hosted my effort here http://www.glen-lodge.co.uk/testing/testing/fadedBox.html and have also added an image of what I would like the end result to look like. It would be great if you all could give me some pointers as I would love to get this right!

Thanks for looking


11-19-2009, 06:21 PM
Hello kyllle,
This works ... I think it would be easier to combine your footerFade.gif and footer.gif so you didn't need to use two divs down there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
#container {
width: 800px;
margin: 30px auto;
background: #fff;
overflow: auto;
font-size: 0.8em;
.box {
width: 298px;
float: left;
border-right: 1px solid #f2f2f2;
border-left: 1px solid #f2f2f2;
margin: 10px;
background: #FDFDFE url(http://www.glen-lodge.co.uk/testing/testing/images/footerFade.gif) repeat-x bottom;
font-size: .75em;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
height: 20px;
float: right;
background: url(http://www.glen-lodge.co.uk/testing/testing/images/buttonRight.gif) no-repeat right top;
margin: 0 3px 3px 0;
.button a {
text-decoration: none;
padding: 0px 8px 2px 12px;
font-weight: bold;
display: block;
background: url(http://www.glen-lodge.co.uk/testing/testing/images/buttonLeft.gif) no-repeat left top;
color: #fff;
.boxBottom {
height: 4px;
background:url(http://www.glen-lodge.co.uk/testing/testing/images/footer.gif) no-repeat;
clear: both;
.box p {margin: 5px;}
.box h2 {
background: url(http://www.glen-lodge.co.uk/testing/testing/images/curveLeft.gif) repeat-x;
padding: 2px 0 2px 5px;
color: #fff;
<div id="container">
<div class="box">
<h2><a href="#">&bull; My effort</a></h2>
CCI is an international choral organisation with over 20 years' experience of organising
International music festivals and competitions. We have enabled hundreds of European and
International choirs to take part in choral events, giving them the opportunity to share
their love of music, culture and travel with choirs from around the world. Our festivals
and competitions allow choirs to enjoy some of the most beautiful cities in Europe through
our half and full day excursions to local areas of interest. Our farewell get-togethers
provide the opportunity for choirs to exchange stories of their festival experience.
<div class="button"><a href="#">Read More</a></div>
<div class="boxBottom"></div>
<!--end .box--></div>
<!--end container--></div>