# dotted line border around a box



## Perseus (Jun 25, 2004)

For my website, I wanted to create a faint dotted line as a border around a white box on a dark background. How can I go about making this while still being able to type basic html text, links, images, etc in this white box with the dotted line as the border? (If this is too confusing, Ill try to reword it! haha)


----------



## Gnomo (Jun 25, 2004)

You can do this very easily with CSS.

To get the white background, set the style to "background: #ffffff;"
To get the dotted line around the box use "border: 1px dotted"

You can apply these styles to just about any html element so if you are using tables to layout, you could apply them to the <td> that you want to be white

For more info on CSS check out the w3school. www.w3schools.com/css/default.asp


----------



## Perseus (Jun 25, 2004)

yes, that seems simple. But I feel its very ugly. Any way I can change the thickness of the dashed line, and color? Here is what I tried and it did NOT work:

<html>
<head>

<style type="text/css">
p 
{
border-style: dashed
border-color: #0000ff
border-bottom-width: 1px
border-left-width: 1px
border-right-width: 1px
border-top-width: 1px
}

</style>

</head>

<body>

<p>A dotted border</p>

</body>
</html>


----------



## mdnky (Jun 25, 2004)

Your code is invalid, that's why it didn't work.  Also, you're applying the border/background to an inline element (P tag), which isn't a great idea if you're going to be putting alot of stuff inside.  Use a div instead.  You can also compress the border attributes into one line to make it a bit easier.

Do you want dotted lines or dashed lines?  Dotted are period shaped, dashed are like minus signs.  Warning:  IE-Win doesn't support dotted, it'll display dashed instead.


```
<!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" xml:lang="en" lang="en">

<head>
  <title>Untitled</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <style>
    
    #dbox {
     border: 1px dotted #000;
     background: #eee;
     } 

  </style>
</head>

<body>
  <div id="dbox">
    <p>Some stuff will be inside here eventually.</p>
    <ul>
      <li>Something</li>
      <li>Something Else</li>
    <ul>
    <p>Enough of that...enjoy!</p>
  </div>
</body>

</html>
```

border: 1px dotted #000;

To change the thickness, just change *1px* to however many thick you'd like.  If you want dashed instead of dotted, change *dotted* to dashed.  To change the color, use a different 3/6 digit code (#000 or #000000 = black, #fff or #ffffff = white, etc.).


----------

