CSS3 border-colors

Использование CSS3 border-colors для выцветания бордюров на элементах. https://robertnyman.com/css3/border-colors/border-colors.html

by akogch

HTML

<div class="border-colors"></div>

CSS

.border-colors {
  width: 100px;
  height: 100px;
  color: #fff;
  border: 10px solid #f00;
  border-width: 10px;
  border-style: solid;
  border-color: #000;
  padding: 10px;
  
  /* 12,13,14 строки не работают. Много цвето? */
  /* border-top-colors: #eee #ddd #ccc #bbb #aaa; */
  /* border-left-colors: #111 #222 #333 #444 #555; */
  /* border-bottom-colors: #666 #777 #888 #999; */
  
  border-top-color: #000;
  border-bottom-color: #156;
  border-left-color: #0f0;
  border-right-color: #f0f;
}