css-border-gradient

html part 

<div class="content"></div>

css part 

1. Gradient on all four sides 

margin: 50px;
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(red,yellow) 30 30;
border-image: -moz-linear-gradient(red,yellow) 30 30;
border-image: linear-gradient(red,yellow) 30 30;

 

2. One edge gradient

.content {
  margin: 50px;
  width: 100px;
  height: 100px;
  border:10px solid #ddd;
  background-clip:padding-box,border-box;
  background-origin:padding-box,border-box;
  background-image:linear-gradient(135deg,#ddd,#ddd),linear-gradient(135deg,#E70303,#FFFF44);
  border-bottom:10px transparent solid;

}