I'm wanted to create a pixel art style border around my #wrap - basically just the corners of the border cut off like this:
I'm having a hard time figuring it out (I'm a total beginner when it comes to css and html, and mostly just use it to tweak my tumblr website). This is what the current code and border on the website looks like:
#wrap {
width: 500px;
margin: 0 auto;
padding: 50px;
background: #fff;
background: rgb(225, 225, 225);
background: rgba(255, 255, 255, 0.95);
border: 5px solid #000;
}
Does anyone know how I can implement this? I thought it'd be easy just to remove the corners of a border, but I can't find any guidance online.
Thanks.
Use multiple box-shadow
div {
width: 50%;
height: 50vh;
margin: 2em auto;
box-shadow: -15px 0 0 0 black,
15px 0 0 0 black,
0 -15px 0 0 black,
0 15px 0 0 black;
}
<div></div>