CSS border question

HTML & CSS
1

Hard to describe it but is there an easy way to have a div box have a 1 pixel border in one color and then a 2 pixel border inside a different color without using 2 different style properties? Currently Im doing it this way, which Im sure Im doing this wrong:


<div style="border:1px #000 solid;">
  <div style="border:2px #fff solid;height:100px;">content here</div>
</div>
2

I’d say you’re not doing it wrong, elements can only have one border, you want two borders, use two borders on two elements.

THOUGH, depending on your content you could use 1px border + 2px padding setting the 2px as the background-color, then set the color on all inner semantic elements like P and H2… though you’d have to null all margins and use padding on P instead.

3

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language"	content="en">

  <style type="text/css">
  
    div {
      outline:8px #def solid;
      border:4px #edf solid;
    }
    
  </style>

  

</head><body>

<div>
  <p>This is a double bordered paragraph.</p>
</div>

</body></html>

but it doesn’t work in ie6-7, so that’s why, probably, you have two <div>s in the first place.

depending on the content, you could ditch the inner div and use the elements inside the remaining <div>.