Page Widget How to - Create CSS border gradient

Question

We would like to know how to create CSS border gradient.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
p {<!-- w  w  w  .j a  v a  2s  .  c  o  m-->
  display: inline-block;
  width: 50px;
  height: 50px;
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  -moz-background-origin: border;
  background-origin: border-box;
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 0 12px #0cc, /* Inset shadow */
        0 0 12px #0cc,               /* Outset shadow */
        inset -999px 0 0 #fff;       /* The background color */
}
</style>
</head>
<body>
  <p>
</body>
</html>

The code above is rendered as follows: