[thelist] CSS Borders

Mark Groen mark at markgroen.com
Tue Jul 6 20:52:15 CDT 2004

----- Original Message ----- 
From: "Robert Gormley" <robert at pennyonthesidewalk.com>
To: <thelist at lists.evolt.org>
Sent: July 6, 2004 5:40 PM
Subject: [thelist] CSS Borders

> I've seen this technique employed on a few sites (though I know I
> have bookmarked them), and wonder if anyone can point me to an
example of
> how to do it cleanly in CSS:
> http://www.pennyonthesidewalk.com/temp/overlapborder.gif

Do you mean the line that says: "personal borrower" is over the grey
border of the box? Think styling a fieldset and legend would do that,
similar effect with CSS example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  <title>Support request</title>
  <style type="text/css">
  fieldset {border: 5px #ff7d00 double;
padding-left: 50px;
padding-bottom: 15px;
padding-top: 15px;
legend {
font-style: italic;
font-weight: bold;
letter-spacing: 2px;
font-size: 1.5em;
<form name="submission" action="mailto:support at widgets-r-us.com"
<legend>Your Details</legend>
<p>Your name<input type="text" class="text" name="submittersname"
<p>Your email address<input type="text" name="submittersemail" /></p>
<legend>Widget Details</legend>
<p>What type of widget are you having problems with?</p>
<p><select size="1" name="widget">
<option value="acqua">Acqua Widget</option>
<option value="blue">Blue Widget</option>
<option value="black">Black Widget</option>




MG Web Services
Web Site Hosting and Development
Bowen Island, B.C., Canada

More information about the thelist mailing list