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

            
              @import "compass/css3";

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

JS

            
              /* Let's play with values on the left! */
            
          
!
999px
Loading ..................