添加边框到填充

Question

我有一个div，左右填充设置为50px。

是否可以添加紫色边框？

我无法向HTML添加代码，如果可能的话，应该使用纯css。我试图用border-image和添加渐变来欺骗它，但我只能这样添加：

div {
  width: 150px;
  height: 150px;
  background-color: grey;
  padding-left: 50px;
  padding-right: 50px;

  border-top: 5px solid black;
  border-image: linear-gradient(to right, white 50px, purple 0%);
  border-image-slice: 1;
}

<div>Content</div>

https://jsfiddle.net/u7zq0amc/1/

Answer 1

改为使用伪元素：

div {
  width: 150px;
  height: 150px;
  background-color: grey;
  padding-left: 50px;
  padding-right: 50px;
  position:relative;
  margin-top:20px;
}
div:before {
  content:"";
  position:absolute;
  height:5px;
  top:-5px;
  right:50px;
  left:50px;
  background:red;
}

<div>Content</div>