<div class="container">
  <div class="box border">Border</div>
  <div class="box shadow">Box shadow</div>
</div>
<p>Ipsum vivamus volutpat tincidunt proin litora</p>
.container {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 4rem;
}

.box {
  width: 100px;
  height: 100px;
  padding: 5px;
  margin-bottom: 10px;
}

.border {
  border: 1px solid red;

  &:hover {
    border: 3px solid red;
  }
}

.shadow {
  box-shadow: 0 0 0 1px red;

  &:hover {
    box-shadow: 0 0 0 3px red;
  }
}

p {
  text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.