CSS, outline-offset: setting the offset for each side individually

Question

In CSS using a outline. Can I set the outline-offset for each side individually?

I don't want to add padding (or any other content) to my element.

Here is a visual representation of what I mean:

Looked all over MDN but couldn't find anything. Is this possible?

Answer 1

Use a pseudo element and you can easily control space and size using border:

.outline {
  padding: 10px;
  display: inline-block;
  position:relative;
  margin:20px;
  background:rgba(0,0,0,.2);
}
.outline:before {
  content:"";
  position:absolute;
  left:-10px;
  right:-20px;
  top:-5px;
  bottom:-5px;
  border:2px solid;
  border-right-width:4px;
  border-left-width:5px;
}

<div class="outline">
  Content
</div>