-5

I am trying to add border which is inside the box, I need to use css after or before for this, how can I achieve this effect?

enter image description here

.box {
  width: 100px;
  height: 100px;
  background: red;
}
<div class="box"></div>
Dave
  • 1
  • 1
  • 9
  • 38
  • 2
    Why don't you try border+outline properties? – Nakarukatoshi Uzumaki Aug 10 '21 at 14:08
  • Because I already have one border on the box. – Dave Aug 10 '21 at 14:09
  • So you want a border which is literally inside the box... Have you tried a `position: relative;` for the box and a `position: absolute;` for your ::after element? I mean, ::after is absolute from the div and you have a `top: 50%; left: 50%; transform: translate(-50%, -50%);` and its width/height hiwever want for the ::after element, with a border as desired (?) – Nakarukatoshi Uzumaki Aug 10 '21 at 14:13

1 Answers1

2

There's a lot of different ways you can achieve this effect, each with their own pros and cons (including how different properties affect document flow):

Outline with negative offset

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  outline: 2px solid darkred;
  outline-offset: -7px;
}
<div class="box"></div>

Border and boxshadow

.box {
  width: 100px;
  height: 100px;
  border: 2px solid darkred;
  background-color: red;
  box-shadow: 0 0 0 5px red;
}
<div class="box"></div>

::after

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
}

.box::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border: 2px solid darkred;
}
<div class="box"></div>
chazsolo
  • 7,873
  • 1
  • 20
  • 44