CODEWITHSUNDEEP
cssborderpadding
Z T
Z T

Reputation: 570

Add border to padding

I have a div, padding set to 50px both left and right.

Padding border?

Is it possible to add the purple border?

I cannot add code to the HTML, this should be done with pure css if possible. I tried to trick this with border-image and adding gradients but I could only add like this:

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/

Upvotes: 0

Views: 38

Answers (1)

Temani Afif
Temani Afif

Reputation: 272816

Use a pseudo element instead:

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>

Upvotes: 1

Related Questions