Corner Border Gradients

by Ian Roberts

HTML

<div class="bot-left">Content</div>
<div class="bot-right">Content</div>
<div class="top-left">Content</div>
<div class="top-right">Content</div>

CSS

/*general for demo*/
div {
margin:7px;
float:left;
height:100px;
width:100px;
}
/*BOTTOM LEFT*/
.bot-left {
  position: relative;
}
.bot-left:before, .bot-left:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -3px;
}
.bot-left:before {
  top: -3px;
  width: 3px;
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(transparent, #000);
  background-image: -moz-linear-gradient(transparent, #000);
  background-image: -o-linear-gradient(transparent, #000);
}
.bot-left:after {
  right: -3px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(left, #000, transparent);
  background-image: -moz-linear-gradient(left, #000, transparent);
  background-image: -o-linear-gradient(left, #000, transparent);
}
/*BOTTOM RIGHT*/
.bot-right {
  position: relative;
}
.bot-right:before, .bot-right:after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: -3px;
  
}
.bot-right:before {
  top: -3px;
  width: 3px;
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(transparent, #000);
  background-image: -moz-linear-gradient(transparent, #000);
  background-image: -o-linear-gradient(transparent, #000);
}
.bot-right:after {
  left: -3px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(#000));
  background-image: -webkit-linear-gradient(left, transparent, #000);
  background-image: -moz-linear-gradient(left, transparent, #000);
  background-image: -o-linear-gradient(left, transparent, #000);
}
/*TOP LEFT*/
.top-left {
  position: relative;
}
.top-left:before, .top-left:after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  
}
.top-left:before {
  bottom: -3px;
  width: 3px;
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000),...