Border gradient cross-browser compatibility

by Elena Shevchuk

HTML

<div class="form-block"></div>

CSS

.form-block {
  background: #fff;
  background: fadeout(white, 70%);
  border: 10px solid #0a6bba;
  width: 306px;
  height: 300px;
  padding: 10px;
  border-bottom: 10px solid #0a6bba;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid #0a6bba;
  background-image:
    -o-linear-gradient(to bottom, #22b8cb, #0a6bba),
    -o-linear-gradient(to right, #22b8cb, #0a6bba);
  background-image:
    -moz-linear-gradient(to bottom, #22b8cb, #0a6bba),
    -moz-linear-gradient(to right, #22b8cb, #0a6bba);
  background-image:
    -webkit-linear-gradient(to bottom, #22b8cb, #0a6bba),
    -webkit-linear-gradient(to right, #22b8cb, #0a6bba);
  background-image:
    linear-gradient(to bottom, #22b8cb, #0a6bba),
    linear-gradient(to right, #22b8cb, #0a6bba);

  -webkit-background-size: 10px 100%, 100% 10px;
  background-size: 10px 100%, 100% 10px;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-origin: border-box;
  background-origin: border-box;
}

.ie9 .form-block,
.ie8 .form-block {
  border: 10px solid #0a6bba;
}