CSS - Rounded Border Issue

I'm trying to make a basic 'business card' website for a family friend and I want to add a custom dotted border (alternating colours) around the inside of my container, but I'm not sure of the best way to achieve what this without lots of extra markup.

Image of Current look
Image of Desired look

Here's the actual site.
http://www.thenewsite.com/thelolmaster/

Greetings,

I'm trying to create a fieldset that has rounded corners and a solid border. From what I gather IE displays rounded corners by default, Firefox does not. The code below makes Firefox display rounded corners, but when a border is applied rounded corners won't display on IE.

Is there anything I can do to enable rounded borders?

Thanks,

fieldset
{
border:3px solid #000000;
-moz-border-radius: 8px;
border-radius: px;
background: #C4FC02;
margin: 0 0 1em 0;
position: relative;
}

Hi,

I am trying to do a rounded corner box with 2 different colour halfs but using little images instead of big images.

Here is my code so far:

CSS:
Code:

#box {
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 3em;
	padding: 0;
	text-align: left;
	width:150px;
	background-color: #eeeeee;
	}
 	
#content{height:180px;}

#tlc, #trc, #blc, #brc { background-color: transparent; background-repeat: no-repeat; }

#tlc { background-image:url(images/tlc.gif); background-position: 0% 0%; }

#trc { background-image:url(images/trc.gif); background-position: 100% 0%; }
	
#blc { background-image:url(images/blc.gif); background-position: 0% 100%; }

#brc { background-image:url(images/brc.gif); background-position: 100% 100%; }

#tb, #bb { background-color: transparent; background-repeat: repeat-x; }
			
#tb { background-image:url(images/tb.gif); background-position: 0% 0%; }

#bb	{ background-image:url(images/bb.gif); background-position: 50% 100%;}
	
#rb { background-image:url(images/r.gif); 	background-position: 100% 0%; background-repeat: repeat-y;}

#lb { background-color: #;	background-image:url(images/l.gif); background-position: 0% 100%; background-repeat: repeat-y;}

HTML:
Code:

<div id="box">				

		<!--- box border -->
		<div id="lb">
		<div id="rb">
		<div id="bb"><div id="blc"><div id="brc">
		<div id="tb"><div id="tlc"><div id="trc">
		<!--  -->
				
		<div id="content">	
			<p>2 colour box.</p>
		</div>
		
		<!--- end of box border -->
		</div></div></div></div>
		</div></div></div></div>
		<!-- -->
		
	</div>

The lb "left border image" and rb "right border image"

needs to change half way down vertically to a different image.
hope some one can help me?!?

Thanks

I have a form design that i've been working on and I've got the border to appear correctly in FF, but not in IE. In IE the sides of the border don't meet the top pieces. I've heard about something similar before and solution involved negative margins. This did work to correct IE but then FF was messed up.
The form is contained in the #wrapper div. I would really appreciate anybody's help. I'll warn you though, I'm pretty new to web design.

Here's the HTML & PHP (The first 2/3 is php):

Code:

<?php require_once('Connections/getBiz.php'); ?>

<?php
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////DREAMWEAVER FUNCTION - USED TO STRIP OUT COMMAS ETC.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}//end DreamWeaver Function

//USED CHECK IF FORM FIELD IS EMPTY
function notEmpty($variable){
if($variable == NULL || $variable == ''){
	$ntEmpty = false;
	} 
else {
	$ntEmpty = true;
	}
return($ntEmpty);
} //end notEmpty function

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML CODE CREATION
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
session_start();
$currentPage = $_SERVER["PHP_SELF"];



$num_fields = 0; //Initiate counter for filled fields
//Set form field variables to 'missing'
$name = "-1";
$city = "-1";
$zip = "-1";
$begDate = "-1";
$endDate = "-1";
$maxRows_Biz = 10;
$pageNum_Biz = 0;

if (isset($_GET['pageNum_Biz'])) {
  $pageNum_Biz = $_GET['pageNum_Biz'];
}
$startrow_Biz = $pageNum_Biz * $maxRows_Biz;

//CHECK EACH FORM FIELD TO SEE IF IT'S EMPTY
if (isset($_GET['Name']) && notEmpty($_GET['Name'])) {
  $name = $_GET['Name'];
  $num_fields++;
}
if (isset($_GET['City']) && notEmpty($_GET['City'])) {
  $city = $_GET['City'];
  $num_fields++;
}
if (isset($_GET['zp']) && notEmpty($_GET['zp'])) {
  $zip = $_GET['zp'];
  $num_fields++;
}
if (isset($_GET['Beginning_Date']) && notEmpty($_GET['Beginning_Date'])) {
  $begDate = date("Y-m-d", strtotime($_GET['Beginning_Date']));
  $num_fields++;
}
if (isset($_GET['Ending_Date']) && notEmpty($_GET['Ending_Date'])) {
  $endDate = date("Y-m-d", strtotime($_GET['Ending_Date']));
  $num_fields++;
}
if (isset($_GET['Submit']) && notEmpty($_GET['Submit'])) {
	$submit = true;
}
//print ($begDate);

mysql_select_db($database_getBiz, $getBiz);

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//IF FORM FIELDS WERE SUBMITTED, CREATE QUERY BASED ON NUMBER OF FILLED FIELDS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//print (str_replace(' ','',GetSQLValueString($zip, "defined")));
//print ("Here is the zip" . $zip . "<br>");
//print ("Here is the zip" . GetSQLValueString($zip, "defined"));
if ($num_fields > 0) {  
	$query_Biz = "SELECT * FROM biz WHERE ";
	if ($name != "-1") {
		$query_Biz .= "bizName LIKE '%" . $name . "%'";
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}
	if ($city != "-1") {
		$query_Biz .= "city LIKE " . GetSQLValueString($city, "text") ;
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}
	if ($zip != "-1") {
		$query_Biz .= "zip IN ( " . $zip . " ) ";
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}	
	if ($begDate != "-1") {
		$query_Biz .= "incDate > " . GetSQLValueString($begDate, "date");
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}
	if ($endDate != "-1") {
		$query_Biz .= "incDate < " . GetSQLValueString($endDate, "date");
		$num_fields--;
	}
/// PUT A LIMIT ON THE QUERY ////////////////////////////////////////////////////////////

	$query_limit_Biz = sprintf("%s LIMIT %d, %d", $query_Biz, $startrow_Biz, $maxRows_Biz); //add limit 
//	print($query_limit_Biz);

	$Biz = mysql_query($query_limit_Biz, $getBiz) or die(mysql_error());
	$row_Biz = mysql_fetch_assoc($Biz);

	if (isset($_GET['totalRows_Biz'])) {  //get total # rows from clicked link....
		$totalRows_Biz = $_GET['totalRows_Biz'];
	} else {
		$all_Biz = mysql_query($query_Biz, $getBiz); //or from adjunct query 
		$totalRows_Biz = mysql_num_rows($all_Biz);
	}
	$totalPages_Biz = ceil($totalRows_Biz/$maxRows_Biz)-1;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//CHECK FOR NEW PARAMETERS AND INCORPORATE THEM
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$queryString_Biz = "";
if (!empty($_SERVER['QUERY_STRING'])) {   //get the query parameters from clicked link
  $params = explode("&", $_SERVER['QUERY_STRING']);
  $newParams = array();
  foreach ($params as $param) {
	if (stristr($param, "pageNum_Biz") == false && 
        stristr($param, "totalRows_Biz") == false) {
//		  print($param);
	      array_push($newParams, $param);
    }
  }
  if (count($newParams) != 0) { //add new parameters, if any, to queryString
    $queryString_Biz = "&" . htmlentities(implode("&", $newParams));
  }
}
$queryString_Biz = sprintf("&totalRows_Biz=%d%s", $totalRows_Biz, $queryString_Biz);
//print ($currentPage);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
?> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NewBizFL - The only site devoted exclusively to free business listings</title>
<link href="css/hilite.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
	<div id="logo">
		<h1>newbizFL</h1>
	</div>
	<div id="menu">
		<ul>
			<li class="active"><a href="#">homepage</a></li>
			<li><a href="#">search</a></li>
			<li><a href="#">about us</a></li>
			<li><a href="#"> faq</a></li>
			<li><a href="#">contact us</a></li>
		</ul>
	</div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>
<div id="wrapper">
    <div class="top"></div>
    <div class="rside">
        <div class="content">
            <div id="srchForm">
                <form name="form1" method="get" action=<?php $currentPage ?> >
                  <fieldset id="location">
                    <ol>
                        <li>
                        <label for="Name">Business Name:</label> 
                        <input type="text" name="Name" id="Name">
                        </li>
                        <li>
                        <label for="City">City:</label>
                        <input type="text" name="City" id="City">
                        </li>
                        <li>
                        <label for="Zip Code">Zip Code:</label>
                        <input type="text" name="zp" id="Zip Code">
                        </li>
                    </ol>  
                  </fieldset>
                  <fieldset id="dateRange">
                    <ol>
                        <li>
                        <label for="Beginning Date">Beginning Date</label>
                        <input type="text" name="Beginning_Date" id="Beginning Date">
                        </li>
                        <li>
                        <label for="Ending Date">Ending Date</label>
                        <input type="text" name="Ending_Date" id="Ending Date">
                        </li>
                    </ol>    
                  </fieldset>
                  <input type="submit" name="Submit" id="Submit" value="Submit" />
                </form>
            </div>
            <div id="dataTable">
            <?php  
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //IF NO RECORDS, SHOW 'NO RECORDS' MESSAGE.  ELSE, SHOW TABLE WITH RECORDS
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            if ($totalRows_Biz == 0 ) {
                echo '<td>No Records to Display' . ' Sorry </td>'; } 
            else {
                echo '<p>&nbsp; Records' . ($startrow_Biz + 1) . ' to '  . min($startrow_Biz + $maxRows_Biz, 	$totalRows_Biz) . ' of ' . $totalRows_Biz . '</p>';  // Result Page Heading: 'Records 1 to 10 of 40'
                echo '<table border="1">';
                echo "<thead>";
                echo "	<tr>";
                echo "		<th scope=\"col\">Business Name</th>";
                echo "		<th scope=\"col\">Address</th>";
                echo "		<th scope=\"col\">City</th>";
                echo "		<th scope=\"col\">Zip</th>";
                echo "		<th scope=\"col\">Filing</th>";
                echo "		<th scope=\"col\">Date</th>";
                echo "		<th scope=\"col\">President</th>";
                echo "	</tr>";
                echo "</thead>";
                $counter = 0; // counter to highlite rows
                do {  //do loop till all records are printed
                    if ($counter++ % 2) {
                        echo '<tr class="hilite">'; } 
                    else {
                        echo '<tr>'; } 
                    echo '<td>' . $row_Biz['bizName'] . '</td>';
                    echo '<td>' . $row_Biz['Address'] . '</td>';
                    echo '<td>' . $row_Biz['city'] . '</td>';
                    echo '<td>' . $row_Biz['zip'] . '</td>';
                    echo '<td>' . $row_Biz['incDate'] . '</td>';
                    echo '<td>' . $row_Biz['type'] . '</td>';
                    echo '<td>' . $row_Biz['pres'] . '</td>';
                    echo '</tr>';
                    } while ($row_Biz = mysql_fetch_assoc($Biz));
                echo '</table>';
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //LINKS FOR 'PREVIOUS', 'NEXT', ETC..
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            echo '<table border="0">';
                echo '<tr>';
                    ////FIRST LINK
                    echo '<td>';
                    if ($pageNum_Biz > 0) { // Show if not first page 
                        echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, 0, $queryString_Biz) . '">First</a>'; } 
                    echo '</td>';
                    ////PREVIOUS LINK
                    echo '<td>';
                    if ($pageNum_Biz > 0) { // Show if not first page 
                        echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, max(0, $pageNum_Biz - 1), 	$queryString_Biz) . '">Previous</a>';}
                    echo '</td>';
                    ////NEXT LINK
            //		print ("This is querystringbiz = " . $queryString_Biz);
            //		print ('%s?pageNum_Biz=%d', $currentPage, 23) ;
            //		print ("total pages = " . $totalPages_Biz);
            //		print ("current page = " . $pageNum_Biz);
            //		print (printf("%s?pageNum_Biz=%d", $currentPage, 2));
                    echo '<td>';
                    // Show if not last page 
                    if ($pageNum_Biz < $totalPages_Biz) { 
                        echo '<a href="' ;
                        echo $currentPage . '?pageNum_Biz=' . ($pageNum_Biz + 1). $queryString_Biz;
                        echo '">Next</a>' ; 
                    }
                    echo '</td>';
                    ////LAST LINK
                    echo '<td>';
                    if ($pageNum_Biz < $totalPages_Biz) { // Show if not last page 
                        echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, $totalPages_Biz, $queryString_Biz) . '">Last</a>';}
                    echo '</td>';
                echo '</tr>';
            echo '</table>';
            }
            ?>
            </div>
        </div>
	</div>
    <div class="bottom"></div>
</div>
</body>
</html>
<?php if (isset($totalRows_Biz)) {
	mysql_free_result($Biz);} ?>

And here's the CSS:

Code:

@charset "utf-8";
.hilite {
	background-color: #CCCCFF;
}
body {
	font-family : "Trebuchet MS", Arial, sans-serif;
	padding: 0;
	text-align: center;
	background-image: url(../images/gradient.png);
	background-repeat: repeat-x;
	background-color: #ecffec;
}
#wrapper {
	width: 920px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	text-align: left;
	background-color: #FFFFFF;
}
#wrapper .bottom {
	background-image: url(../images/bottom.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 21px;
}

table, th, td  {
border : 1px solid #d4e0ee;
border-collapse : collapse;
font-family : "Trebuchet MS", Arial, sans-serif;
color : #555;
} 
#wrapper .rside {
	background-image: url(../images/right.png);
	background-repeat: repeat-y;
	background-position: right top;
}

#header {
	width: 900px;
	height: 40px;
	margin: 0 auto 20px auto;
	padding-top: 10px;
}
#menu {
	float: right;
	padding-top: 10px;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin-left: 5px;
	padding: 1px 10px;
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #A6A6FF;
}

#menu .active a {
}

#menu a:hover {
	text-decoration: underline;
}

#logo {
	float: left;
}
#logo h1 {
	float: left;
	margin: 0;
	font-size: 38px;
	color: #8484FF;
}

#logo h1 sup {
	vertical-align: text-top;
	font-size: 24px;
}

#logo h1 a {
	color: #0099E8;
}
#wrapper #dataTable {
	text-align: left;
	clear: both;

}
legend {
	margin-left: 1em;
	color: #000000;
	font-weight: bold;
	padding: 0;
}
fieldset ol {
	list-style: none;
	margin: 0;
	padding: 0.5em 0em 0em .5em;
}
fieldset li {  
padding-bottom: 1em;
} 
label {
	float: left;
	width: 7em;
	margin-right: 1em;
}
#wrapper #location {
	float: left;
	width: 40%;
	margin-right: 15px;
	margin-left: 5px;
}
#wrapper #dateRange {
	margin-right: 20px;
}

input {
background: #F3F4EC !important;
}
#wrapper .top {
	background-image: url(../images/top.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 18px;
	margin: 0;
}
#wrapper .top span {
	background-image: url(../images/leftside.png);
	background-repeat: repeat-y;
	background-position: left top;
}
#wrapper .content {
	background-image: url(../images/leftside.png);
	background-repeat: repeat-y;
	background-position: left top;
	padding-top: 0px;
	padding-right: 20;
	padding-bottom: 0;
	padding-left: 20;
}
#wrapper .content span {
	background-image: url(../images/right.png);
	background-repeat: repeat-y;
	background-position: right top;
}

Sorry, I know my code is probably a mess. I really appreciate anyone's help with this, though.
Oh, and by the way, does anyone know how to attach things to a post? For example, a screen capture (jpeg) or the images I used?

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help