dotted line border around a box

Perseus

Perseus

Registered
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)
 
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
 
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>
 
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.

Code: 
<!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.).
 
You must log in or register to reply here.
Back
Top