CODEWITHSUNDEEP
css
user1022585
user1022585

Reputation: 13641

Css - Need 'triple' border

I have this css: 

border: 2px solid #00ff60;
outline: 1px solid #000;
outline-offset: 0px;

Which produces this:

image

How can I adjust it to also have an inner black border like at the bottom?

EDIT: sorry forgot to add, I want to apply this style to an image.

Upvotes: 2

Views: 480

Answers (1)

Temani Afif
Temani Afif

Reputation: 272628

Consider using box-shadow. You can also do it with multiple box-shadow :

.box {
  border: 5px solid #00ff60;
  outline: 5px solid #000;
  outline-offset: 0px;
  height: 100px;
  width: 100px;
  box-shadow:0px 0px 0px 5px #000 inset;
  display:inline-block;
}

.box-alt {
  border: 5px solid #000;
  outline: 5px solid #00ff60;
  outline-offset: 0px;
  height: 100px;
  width: 100px;
  box-shadow:0px 0px 0px 10px #000;
  margin:10px 20px;
  display:inline-block;
}

.box-alt-2 {
  height: 100px;
  width: 100px;
  box-shadow:0px 0px 0px 5px #000,
  0px 0px 0px 10px #00ff60,
  0px 0px 0px 15px #000;
  margin:10px 20px;
  display:inline-block;
}
<div class="box">
</div>

<div class="box-alt">
</div>

<div class="box-alt-2">
</div>

You can also achieve the same using multiple background and linear-gradient:

.box {
  height: 100px;
  width: 100px;
  background:
   linear-gradient(#fff,#fff) center/calc(100% - 20px) calc(100% - 20px),
   linear-gradient(red,red) center/calc(100% - 15px) calc(100% - 15px),
   linear-gradient(#000,#000) center/calc(100% - 10px) calc(100% - 10px),
   linear-gradient(green,green) center/calc(100% - 5px) calc(100% - 5px),
   linear-gradient(#000,#000) center/100% 100%; 
  background-repeat:no-repeat;
}
<div class="box">
</div>

Upvotes: 3

Related Questions