UPDATED: How to Make Digital 8-Bit Style Corners Using Only CSS

Back in 2010 we were inspired by a recent project to write a tutorial on how to create a digital 8-bit style effect for corners using only CSS. Now it’s 2017 and a passion side project of ours, 8bitters.com, has once again inspired us to revisit our earlier method and improve upon it. While our method back in 2010 was beautifully coded for its time, it was not without its drawbacks. The older method required more markup since CSS3 and pseudo classes didn’t exist yet. The biggest drawback however was that it needed to have a solid background color, meaning that it could never be used as an overlay, which for our new project was a major issue. In this tutorial we will teach you an updated method for coding beautiful responsive digital 8-bit style corners using only 100% CSS3 requiring zero images and less markup.

Step 1: Coding and Styling the Main Section

In the first step of this tutorial we will code and style the main section.

HTML5

<section class="section_8bit">
</section>

CSS3

.section_8bit{ 
width: 100%; 
float: left; 
border-left: 10px solid #FF6600;
border-right: 10px solid #FF6600;
position: relative; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;
}

Items to Note:

  • We are using the HTML5 structural ‘section’ element; depending on your layout you might feel the need to change this. (ex. ‘article’, ‘header’, ‘div’, etc)
  • We used a width of 100% for responsive purposes, you can adjust the width to a fixed width or add a max-width if necessary.
  • We used ‘float’ but depending on your layout ‘block’ or ‘inline-block’ might work better.
  • Edit the hex values #FF6600 to change the border colors.
  • Position ‘relative’ is important for the positioning of the 8-bit corner effects.
  • We added CSS3 ‘box-sizing’ to allow for responsiveness.

Step 2: Coding and Styling the Inner Wrapper Content DIV

In the next step of this tutorial we will code and style the inner wrapper content DIV.

HTML5

<section class="section_8bit">
  <div class="wrapper">
    Content Goes Here
  </div>
</section>

CSS3

.section_8bit .wrapper{ 
display: block;
color: #FF6600;
padding: 40px; 
margin: -10px 0; 
border-top: 10px solid #FF6600; 
border-bottom: 10px solid #FF6600; 
}

Items to Note:

  • Edit the hex values #FF6600 to change the text and border colors.
  • Adjust the ‘padding’ if necessary.
  • A negative top and bottom margin have been set to offset the borders to help create the 8-bit style effect.

Step 3: Using CSS3 Pseudo Classes to Finish the 8-Bit Corner Effect

In the final step of this tutorial we will use CSS3 pseudo classes to finish the 8-bit corner effect. We will be using a total of four pseudo classes in order to create each of the corners. Since there are only two pseudo classes available per element (::before and ::after), we will apply the top two corners to the main section and the bottom two corners to the inner wrapper DIV.

CSS3

.section_8bit::before, 
.section_8bit::after,
.section_8bit .wrapper::before, 
.section_8bit .wrapper::after{ 
content: ''; 
width: 10px; 
height: 10px; 
display: block; 
position: absolute;   
background: #FF6600; 
}
.section_8bit::before{ top: -5px; left: -5px; }
.section_8bit::after{ top: -5px; right: -5px; }
.section_8bit .wrapper::before{ bottom: -5px; left: -5px; }
.section_8bit .wrapper::after{ bottom: -5px; right: -5px; }

Items to Note:

  • Since the border thickness we used on the previous steps are 10 pixels, we need the corners to match by using a width and height of 10 pixels.
  • Edit the hex value #FF6600 to change the corner background colors.
  • The corners will be absolute positioned to the main section since it’s the only element with relative positioning set.
  • Each of the pseudo elements will be positioned by a negative value of 5 pixels to position them correctly in each of the corners.

Full Code

HTML5

<section class="section_8bit">
  <div class="wrapper">
    Content Goes Here
  </div>
</section>

CSS3

.section_8bit{ 
width: 100%; 
float: left; 
border-left: 10px solid #FF6600;
border-right: 10px solid #FF6600;
position: relative; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;
}

.section_8bit .wrapper{ 
display: block;
color: #FF6600;
padding: 40px; 
margin: -10px 0; 
border-top: 10px solid #FF6600; 
border-bottom: 10px solid #FF6600; 
}

.section_8bit::before, 
.section_8bit::after,
.section_8bit .wrapper::before, 
.section_8bit .wrapper::after{ 
content: ''; 
width: 10px; 
height: 10px; 
display: block; 
position: absolute;   
background: #FF6600; 
}
.section_8bit::before{ top: -5px; left: -5px; }
.section_8bit::after{ top: -5px; right: -5px; }
.section_8bit .wrapper::before{ bottom: -5px; left: -5px; }
.section_8bit .wrapper::after{ bottom: -5px; right: -5px; }

See this Tutorial in Action

Visit 8bitters.com

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.