CODEWITHSUNDEEP
htmlcss
Steve
Steve

Reputation: 4908

An etched border around a box

I have a box where I've created an "etched" vertical line by placing a #bbb line and an #fff line next to each other with the CSS:

div#product_details_separator {
    height:100px;
    width:0px;
    border-left:1px solid #bbb;
    border-right:1px solid #fff;

Etched Vertical Line: enter image description here

Does anyone know how I can give the entire border around the box this same etched effect?

Upvotes: 1

Views: 650

Answers (3)

Dhiraj
Dhiraj

Reputation: 1871

You can apply box-shadow to achieve that etched effect. See the DEMO

CSS

.box {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
}

Upvotes: 2

vals
vals

Reputation: 64244

You have several interesting (and seldom used) styles to set on a border w3c doc

Combining them, you can achieve several interesting variations on your request

Notice that the grayed color is calculated automatically. See also the 4th example, to achieve special effects different from the standard ones 

div {
    width: 100px;
  height: 80px;
  display: inline-block;
}  
.one {
  border: groove 20px lightblue;
}
.two {
  border: ridge 20px lightgreen;
}
.three {
  border: inset 20px tomato;
}
.four {
  border-top: groove 20px tomato;
  border-left: groove 20px tomato;
  border-right: ridge 20px tomato;
  border-bottom: ridge 20px tomato;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

Upvotes: 2

whiterabbit25
whiterabbit25

Reputation: 277

What you're trying to do sounds kind of like the inset border-style, that may be worth looking into. To add a second layer of border, however, you can use the outline property. This allows you to specify an outline that goes directly around the border.

border: 1px solid #bbb;
outline: 1px solid #fff;

Upvotes: 1

Related Questions