Hello

// imagine
border-top: 1px solid # 999999;

Plain horizontal stripe, gray. Can a gradient be made? Let’s start from gray to white

Answer 1, authority 100%

Use gradient fill pseudo-elements instead of borders.

View example

Layout

& lt; div class = "gradient-demo" & gt; & lt; / div & gt;

CSS

. gradient-demo :: before {
  / * Gradient * /
  background: #ffffff;
  background: -moz-linear-gradient (left, #ffffff 0%, # 999999 100%);
  background: -webkit-gradient (linear, left top, right top, color-stop (0%, #ffffff), color-stop (100%, # 999999));
  background: -webkit-linear-gradient (left, #ffffff 0%, # 999999 100%);
  background: -o-linear-gradient (left, #ffffff 0%, # 999999 100%);
  background: -ms-linear-gradient (left, #ffffff 0%, # 999999 100%);
  background: linear-gradient (to right, #ffffff 0%, # 999999 100%);
  filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# 999999', GradientType = 1);
  content: "";
  display: block;
  / * Instead of thickness * /
  height: 3px;
  width: 100%;
}

Answer 2, authority 29%

you can still do this

background: rgb (30, 50, 230);
background: -moz-linear-gradient (30deg, rgb (30, 50, 230) 30%, rgb (90, 140, 250) 70%);
background: -webkit-linear-gradient (30deg, rgb (30, 50, 230) 30%, rgb (90, 140, 250) 70%);
background: -o-linear-gradient (30deg, rgb (30, 50, 230) 30%, rgb (90, 140, 250) 70%);
background: -ms-linear-gradient (30deg, rgb (30, 50, 230) 30%, rgb (90, 140, 250) 70%);
background: linear-gradient (120deg, rgb (30, 50, 230) 30%, rgb (90, 140, 250) 70%);