[Solved] Add border using css ::after [duplicate]

by


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>

solved Add border using css ::after [duplicate]