How to Make Inner and Outer Borders in CSSby Sara Williams
Every element on a Web page is capable of showing a border if you code it in CSS. Borders can come in any color or width you want, and it is possible to even curve them. Double borders take a little more work because each element can only have one border. While you could wrap it in an extra div in HTML code, a far cleaner and nicer way of applying an inner and outer border is with psuedo-elements. In CSS, pseudo-elements are created by making style rules prefixed with “:after” or “:before.”
Open your HTML file in an editor – Notepad will do, but a line-numbered code editor works best – and find the “<div>” wrapping the content that needs the borders. You can also add the tags if they are not yet in the code, and give them a unique ID name:
<div id=”my_borders”> Content... </div>
Open the stylesheet file for your Web page or place the CSS code between “<style>” tags in the head of your HTML code:
<style type=”text/css”> </style>
Write a style rule for the div and give it a border. Make this your inner border:
border: 3px solid red; }
Change the pixel value to the width you want for your border, and change “red” to another color name or hexadecimal color code you want to use.
Create a pseudo-element to make the outside border:
content: ''; }
This style rule creates a new div that is not in the HTML, but the browser will treat it as if it is there.
Style the pseudo-element so it goes behind the div:
position: absolute; z-index: -10; }
Stretch the psuedo-element to fit around the inner border and move it up:
position: absolute; z-index: -10; padding: 3px; top: -3px; left: -3px; }
The “padding” value here is equal to the width of the inner border, and this stretches the size of the div. Moving the pseudo-element three pixels up from the top and three pixels to the right centers it over the inner border.
Style the border of the psuedo-element to create your outer border:
position: absolute; z-index: -10; padding: 3px; top: -3px; left: -3px; border: 10px solid blue; }
Click here to provide feedback on this article