Box with darkened corners without using images

Question

Is it possible to recreate such a field without using background images and only one element?

Ideally, I could control which corners are darkened by adding a class, so the above image could be class="box dark-top dark-left dark-bottom dark-right". I can darken two using: before and: after, but I have problems with good thinking to darken three or four corners without adding extra markup.

Answer 1

, , . , , /lighten/ .

Fiddle: http://jsfiddle.net/KZSLH/

.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}

Answer 2

, , , - ... , ,

, , , , ... , - ?

div:

<div id="thick" />
<div id="thin" />

"" .

#thick {
  position:absolute;
  top:50px;
  left:50px;
  height:100px;
  width:100px;
  background-color:white;
  border:3px solid black;
}

#thin {
  position:relative;
  top:-2px;
  left:-2px;
  height:104px;
  width:104px;
  background-color:white;
  border-radius: 15px;
}

: http://jsfiddle.net/bGrdA/

.

Answer 3

, . , , .

: http://jsfiddle.net/n7pgP/

, :

dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right

Answer 4

,

http://jsfiddle.net/V8jmR/

#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute;
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
    content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

CSS -

Answer 5

The only possibility I know is to use additional elements:

<div class="box">
    <span class="darkTopLeft"></span>
    <span class="darkTopRight"></span>
    <span class="darkBottomLeft"></span>
    <span class="darkBottomRight"></span>
</div>

.box {
    background-color: #fff;
    border: 1px solid #ccc;
    height: 100px;
    position: relative;
    width: 100px;
}

.box > span {
    height: 10px;
    position: absolute;
    width: 10px;
}

.darkTopLeft {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    left: -1px;
    top: -1px;
}

.darkTopRight {
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    right: -1px;
    top: -1px;
}

.darkBottomLeft {
    bottom: -1px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    left: -1px;
}

.darkBottomRight {
    bottom: -1px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    right: -1px;
}

http://jsfiddle.net/cM7xU/