Responsive CSS Fixed Page Borders – How to

Simple and stylish website with well defined section which is easily understand by every one. Studio D YXE, or Studio D, managed to create a eye catchy effect effortlessly. They completely forgot the color palette and choose the right theme for their website a light grey background scheme, and red focused bordered color for all […]

Simple and stylish website with well defined section which is easily understand by every one. Studio D YXE, or Studio D, managed to create a eye catchy effect effortlessly.

They completely forgot the color palette and choose the right theme for their website a light grey background scheme, and red focused bordered color for all their menus, buttons as well as their window border. The red color give birth a new look to the stylized photography.

Main text of their website body is dark grey, similar to black. By reducing the color palette they try to stylized their website with new look.

Screenshot For CSS border Inspired by studiodyxe.com:

Responsive-CSS-Fixed-Page-Borders-TwoClock

Responsive CSS Fixed Page Borders:

Body content:
The Studio D website has a red color border fixed around the visible window edge no problem if content has the property overflow hidden. To create this, firstly an empty div tag is required with the class of ‘wrapper’, this will contain the border.

<div class="wrapper"></div>

 

..For testing only
In order to test that this works as it should, we need some page content that’s longer than the actual page. Here another div is added and this will be given a long height so that later on, the border can be seen working around the edge of the page.

<div class="long">A long piece of     content</div>

 

Add the CSS
In the head section of the page, add an opening style tag so that the CSS can be applied to the elements. The first styling will be for the page itself. Setting the height to 100% and the background to a similar colour to Studio D helps get the look. Also a large padding around the edge is very useful.

<style>
 html, body{
 height: 100%;
 background-color: #f0f0f0;
 padding: 20px;
 }

 

Style the wrapper
The wrapper class is going to contain the border, so it is set to be fixed on the page in the top-left corner. It’s given a z-index higher than other page content and then made to fit the width and height of the page. The box sizing is set to include the border, then a 5px border is added all round.

 .wrapper{
position: fixed;
z-index: 999;
top: 0; left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: #ff0000 solid 5px;
}

 

Finishing off
The class of ‘long’ is only here for testing purposes and it’s given a height of 2,000 pixels which is larger than most monitors. Save this and test in the browser to see the red border always on the screen and fitting neatly into the browser window, even working responsively.

.long{ height: 2000px;}
</style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *