Website Design Forum

**Cheshire_cat** · 05-15-2007, 02:27 PM

I’m new to web design and I have run into a bit of a snag. I had my site reviewed and one of the tips was that I should put a rounded border instead of a square one. I know I am using tables and not <div>, someone is actually helping me convert it into css. But for now I would still like to but a rounded border around it. I have the image that I want to use, but can anyone tell me the best way to do it. Thanks

**jameslow** · 05-15-2007, 07:27 PM

place the image at the top left of the table, simple?

**vangogh** · 05-15-2007, 08:09 PM

Phil at the moment the only way to create a rounded border that works in Internet Explorer is to make that border be an image. The simplest way is just create the full rounded border around your current image. You'd want the color outside the image to match the background color the image be against on the page. You could also make the image a transparent gif or png depending on the image and not have to worry about the color outside the border.

Another way is to create an image of just the rounded corner and then use a series of background images along with normal css borders. This method will require a little more knowledge of css. I don't think you'll be able to it with tables.

CSS3 gives the ability to create a rounded border with code alone, but unfortunately it doesn't work in any version of IE at the moment.

**Sydpix** · 05-15-2007, 10:34 PM

Here is a cool way to achieve the rounded corner thing without images.

The HTML:

Code:

<div id="round">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div id="content">
<!-- nothing above this -->
Your content in here
<!-- nothing below this -->
 </div>
  <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
 </div>

The CSS:

Code:

div#round{ margin: 0 1%;background: #CCCCCC
}
#content{ margin: 0 1%;background: #CCCCCC
}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #CCCCCC}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

**Cheshire_cat** · 05-16-2007, 12:25 AM

I have the image that I want to use but I cannot see it when I put it in the table.

**Cheshire_cat** · 05-16-2007, 12:48 AM

I can see parts of it but not the whole.

**vangogh** · 05-17-2007, 01:02 AM

Sydpix, I stand corrected. I forgot about that method. I saw something similar to it once before and it slipped my mind. Thanks for posting the code.

**Cheshire_cat** · 05-18-2007, 12:40 AM

That code is not working for me.

**Sydpix** · 05-18-2007, 07:53 AM

Here is a full working page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
div#round{ margin: 0 1%;background: #CCCCCC
}
#content{ margin: 0 1%;background: #CCCCCC
}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #CCCCCC}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
-->
</style>
</head>

<body><div id="round">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div id="content">
<!-- nothing above this -->
<h2>Your content </h2>
<p>You have a modern house with a small patch of lawn that the builders left as an excuse for a garden. Now it's time to sort it out, but what style should you go for? Carol Bailey takes a look at the options.
  
Lorem epsom ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet epsom sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic epsom amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad epsom valorem. Lorem ipson epsom dolor sic amet sec in consetum nunc ad valorem.
  
Lorem ipson dolor sic amet sec in consetum epsom nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem epsom ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in epsom consetum nunc ad valorem.
  
Lorem ipson dolor sic amet sec in consetum epsom nunc ad valorem.
  
Lorem epsom  ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem.
  
Lorem ipson dolor sic ametepsom  sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet epsom sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem. 
   <!-- nothing below this -->
 </p>
</span></div>
  <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
 </div>
</body>
</html>

**futurex** · 05-18-2007, 08:37 AM

Quote:

Originally Posted by Cheshire_cat

I’m new to web design and I have run into a bit of a snag. I had my site reviewed and one of the tips was that I should put a rounded border instead of a square one. I know I am using tables and not <div>, someone is actually helping me convert it into css. But for now I would still like to but a rounded border around it. I have the image that I want to use, but can anyone tell me the best way to do it. Thanks

i think it is not a simple question
because i don't know that........

**Cheshire_cat** · 05-18-2007, 01:32 PM

got it. thanks.