CodePen

HTML

            
              <h1>Sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur vero pariatur amet voluptatibus modi similique nemo! Illo, placeat, corrupti modi recusandae nostrum et veniam nulla quod repellat voluptas animi.</p>
<p>EOF</p>
            
          
!

CSS

            
              $border-color: #5bb0ff;
$border-width: 10px;
$border-radius: 10px;
$body-bg: #fff;

html, body {
  &:after, &:before {
    content: "";
    display: block;
    position: fixed;
  }
}

html {
  background-color: $border-color;
  height: 100%;
  padding: 0 $border-width + $border-radius;
  &:after, &:before {
    background-color: $border-color;
    height: $border-width;
    left: 0;
    right: 0;
  }
  &:before {
    top: 0; 
  }
  &:after {
    bottom: 0;
  }
}

body {
  box-sizing: border-box;
  border: $body-bg {
    bottom: solid;
    top: solid;
  };
  background-color: $body-bg;
  min-height: 100%;
  padding: $border-width 0;
  &:after, &:before {
    background-color: $body-bg;
    bottom: $border-width;
    top: $border-width;
    width: $border-radius;
  }
  &:before {
    border-bottom-left-radius: $border-radius;
    border-top-left-radius: $border-radius;
    left: $border-width;
  }
  &:after {
    border-bottom-right-radius: $border-radius;
    border-top-right-radius: $border-radius;
    right: $border-width;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* Let's play with values on the left! */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................