如何为div框创建渐变边框？

Question

我使用了以下代码，但无法创建此框的渐变。我想创建一个div的渐变边框，仅在顶部边框周围显示，而在左侧和右侧仅显示

.HH {
  height: 100px;
  width: 500px;
  border: 2px solid;
  padding: 3px;
  -moz-box-shadow: 0px 2px 8px #000;
  /* Firefox */
  -webkit-box-shadow: 0px 2px 8px #000;
  /* Safari, Chrome */
  box-shadow: 0px 2px 8px #000;
  /* CSS3 */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  z-index: 1;
}

<div class="HH">
  HI
</div>