Offset Background with Border

Inspired by the Mozilla VPN website

by

These are a couple simple tweaks to make an offset background and border inspired by the Mozilla VPN website.

Offset background
/* Offset Border Box */
.border-offset{
  position: relative;
}

.border-offset:before{
  content:'';
  position: absolute;
  width: 100%; 
  height: 100%; 
  top: 2em;
  left: 2em;
  background-color: #666666;
  border-radius: 4px;
}

.border-offset:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 4px solid black;
  border-radius: 8px;
}

For instructions, please see this video tutorial:

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment