Search code examples
htmlcssborderpixeltumblr

Pixel art style border on tumblr theme

I'm wanted to create a pixel art style border around my #wrap - basically just the corners of the border cut off like this:

Pixilated border

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;
    }

Normal border

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.

Solution

  • 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>