Cant replicate curved border effect :-(

HTML & CSS
1

Hi from no more volcanic ash in the sky UK, Wakefield :slight_smile:

I want to add a curved box effect to the purple container border in this page -
http://www.pauserefreshment.co.uk/bewleys_point_of_sale_e_brochure.html

Got the inspiration from this sitepoint article -

But this is how it turns out :frowning:
http://www.pauserefreshment.co.uk/bewleys_point_of_sale_e_brochure_curve_test.html

Here is the offending code…

<title>Bewleys point of sale merchandise | pause... refreshment</title>
<link rel="stylesheet" type="text/css" href="css/e_brochure.css" />
</head>
<body>
<div id="container">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
  <div id="header">
      <h1> pause... refreshment </h1>
    <h2>Professional coffee machine suppliers</h2>
    <p class="contactline">Tel 01904 363091 | eMail <a href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></p>
  </div>
  <div id="content">
    <h3><img src="images/model_bean/model_holds_menu_100_150.jpg" alt="Branded menu choices from pause... refreshment" /> &quot;Increase coffee sales with Bewleys branded posters &amp; menus&quot;</h3>
    <h4>Menus</h4>
    <p>Communicate your speciality drinks menu with Bewleys branded table top menus. Durable and easy to clean they'll always look brand new. Dimensions 26 x 10cm. We've got lots in stock ready for delivery.</p>
    <p class="caption">Table &amp; poster menus - "click and browse"</p>
    <div class="machinegallery"><a href="images/model_bean/model_holds_menu_400_598.jpg" rel="lightbox[group]" title="Branded eye catching design"><img src="images/model_bean/model_holds_menu_100_100.jpg" alt="Communicate your speciality drinks menu" /></a><br>
      <p class="caption">Menu pic 1</p>
    </div>
    <div class="machinegallery"><a href="images/model_bean/drinks_menu_2_400_598.jpg" rel="lightbox[group]" title="Branded eye catching design"><img src="images/model_bean/drinks_menu_2_100_100.jpg" alt="Eye catching branded design" /></a><br>
      <p class="caption">Menu pic 2 </p>
    </div>
    <div class="machinegallery"><a href="images/model_bean/drinks_menu_on_table_cup_400.jpg" rel="lightbox[group]" title="Branded eye catching design"><img src="images/model_bean/drinks_menu_on_table_100_100.jpg" alt="Grow volume sales communicate choice" /></a><br>
      <p class="caption">Menu pic 3</p>
    </div>
    <div style="clear:both"></div>
    <h4>Posters</h4>
    <p>Communicate your ready to serve up coffee with big and bold posters. Printed on quality thick paper with a gloss finish your customers will know your ready to serve.</p>
    <div class="machinegallery"><a href="images/model_bean/model_holds_poster_350_523.jpg" rel="lightbox[group]" title="Branded eye catching design"><img src="images/model_bean/model_holds_poster_100_100.jpg" alt="Communicate your speciality drinks menu" /></a><br>
      <p class="caption">Poster pic 1</p>
    </div>
    <div class="machinegallery"><a href="images/model_bean/model_holds_poster_350_235.jpg" rel="lightbox[group]" title="Branded eye catching design"><img src="images/model_bean/model_holds_poster_100_100_2.jpg" alt="Eye catching branded design" /></a><br>
      <p class="caption">Poster pic 2</p>
    </div>
    <div class="machinegallery"><a href="images/model_bean/model_holds_poster_350_235_BW.jpg" rel="lightbox[group]" title="Branded eye catching design"><img src="images/model_bean/model_holds_poster_100_100_2_BW.jpg" alt="Grow volume sales communicate choice" /></a><br>
      <p class="caption">Poster pic 3</p>
    </div>
    <div style="clear:both"></div>
    <h4>How to order</h4>
    <p>While stocks last we've got plenty of Bewleys branded menus and posters. To buy all you have to do is ring pause... refreshment on 01924 363091 or eMail <a class="test" href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></p>
  </div>
  <div id="footer"> pause... refreshment a division of ARAMARK </div>
</div>
</div></div></div></div>
</body>
</html>


@charset "utf-8";
/* CSS Document */

body {
background-color:#;
background-image:url(../images/model_bean/bewleys_logo_2.gif);
}
		
#container
{
	margin: 0 30px;
	background: #fff;
	width: 600px;
	margin-left:auto;
	margin-right:auto;
	border:3px solid #622449;
	padding: 0 0px 0 0px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	color:#622449;
	font-weight:bold;	
}


#header h1 {
font-size:3em;
color:#B5B43E;
}

#header
{
	background: #FFFFFF;
	padding: 20px;
}

#content img {
float:right;
}

#header .contactline {
margin-top:-20px;
}

#header h1 { margin: 0; }

#navigation
{
	float: left;
	width: 100%;
	background: #333;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content
{
	clear: left;
	padding: 20px;
	background:#F2CF4D;	
}

#content h3
{
	color: #622449;
	font-size: 2em;
	margin: 0 0 .5em;
	text-decoration:underline;
}

#footer
{
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
	}
	
/* Image gallery ///////////////////////////////////////////////////////////////////*/

.machinegallery {
	float: left;
	width: 100px;
	border: 1px solid #999;
	margin: 0 70px 15px 0;
	padding: 5px;
}
#content .machinegallery a img {
	width: 100px;
	height:100px;
	border: none;
	margin: 0px;
	padding: 0px;
}

#content h4 {
font-size:1.5em;
}

#content .float_image {
	float:left;
	padding-left:2%;
	height:150px;
	width:150px;
	padding-bottom:-1px;
}
#content .caption {
	text-align:center;
	padding-bottom:5px;
	font-weight:bold;
}
#content a img {
	border:0 solid #000000;
	height:94px;
	margin-bottom:120px;
	padding-left:20px;
	margin-bottom:0px;
	border:0px solid #000;
}
img {
	border:medium none;
}
.wedge {
	clear:both;
}
/* Image gallery end //////////////////////////////////////////////////*/
/* Light Box 2 */
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}
/* Light Box 2 end */	
	
/* Light Box */
#lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#lightbox img {
	width: auto;
	height: auto;
}
#lightbox a img {
	border: none;
}
#outerImageContainer {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#imageContainer {
	padding: 10px;
}
#loading {
	position: absolute;
	top: 40%;
	left: 40%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#hoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#imageContainer>#hoverNav {
	left: 0;
}
#hoverNav a {
	outline: none;
}
#prevLink, #nextLink {
	width: 49%;
	height: 100%;
	background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
	display: block;
}
#prevLink {
	left: 0;
	float: left;
}
#nextLink {
	right: 0;
	float: right;
}
#prevLink:hover, #prevLink:visited:hover {
	background: url(/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
	background: url(/images/nextlabel.gif) right 15% no-repeat;
}
#imageDataContainer {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
}
#imageData {
	padding:0 10px;
	color: #666;
}
#imageData #imageDetails {
	width: 70%;
	float: left;
	text-align: left;
}
#imageData #caption {
	font-weight: bold;
}
#imageData #numberDisplay {
	display: block;
	clear: left;
	padding-bottom: 1.0em;
}
#imageData #bottomNavClose {
	width: 66px;
	float: right;
	padding-bottom: 0.7em;
	outline: none;
}
#overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}
.strapshrink {
	font-size:14px
}
/* Light Box Ends*/	

a {
	color:#702453;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

/* Curved corner fx start */

.bl {background: url(../images/hot_deal/corner_1.jpg) 0 100% no-repeat #e68200; width: 20em} 
.br {background: url(../images/hot_deal/corner_2.jpg) 100% 100% no-repeat} 
.tl {background: url(../images/hot_deal/corner_3.jpg) 0 0 no-repeat} 
.tr {background: url(../images/hot_deal/corner_3.jpg) 100% 0 no-repeat; padding:10px}

/* Curved corner FX ends */

Any insights welcome :slight_smile:

2

Hi,

You can’t really do it like that because you have background colours to your header and footer which will sit on top of the images and rub them out.

If it’s just the border effect you want then the easiest way is to do it with two larger images. Make one slice for the top and one for the bottom and just top and tail the layout.

The top would be an element that stretches the width of the layout and paints both top corners and the top border in one go. You would need to make the outside edge of the corner transparent so that your body background shows but the inside would need to match the header background colour (and vice versa for the footer).

If you want to do each corner individually then it will be a lot harder especially because you can’t use a solid corner but would need a transparent corner to let the background of the body show through. the problem being that any background on the element would show through also and therefore the corners have to be outside and backgrounds set on the element.

Or you could do it more easily with border-radius (and equivalent vendor extension) but there is no support for IE.

3

http://www.pauserefreshment.co.uk/bewleys_point_of_sale_e_brochure_curve_test.html

Thanks for your help ive now sorted it :slight_smile: coutesy of your help & taking a closer look at this tutorial -
http://webdesign.about.com/od/css/a/aa072406.htm