.box {
background: blue;
width: 500px;
height: 550px;
margin: 25px 0 25px 25px;
border-width: 30px;
border-style: solid;
border-color: blue grey yellow green;
box-shadow: 20px 20px 0 10px purple, -20px 20px 0 10px purple, 20px -20px 0 10px purple, -20px -20px 0 10px purple;
}
.box-text {
padding: 20px;
color: white;
}
I experimented with the outline, but it did not provide the desired effect on all sides of the box. So I opted for using the box-shadow property instead. My goal is to replicate the style shown in this image. However, after applying my code mentioned above, I ended up with a result similar to this one. I am struggling to achieve consistent and equal solid box shadows on all sides. Any suggestions or guidance would be greatly appreciated.