How to Make Inner and Outer Borders in CSS

by 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:

my_borders {

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:

my_borders:after {

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:

my_borders:after {

position: absolute; z-index: -10; }


Stretch the psuedo-element to fit around the inner border and move it up:

my_borders:after {

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:

my_borders:after {

position: absolute; z-index: -10; padding: 3px; top: -3px; left: -3px; border: 10px solid blue; }

About the Author

Sara Williams lives in western New York, where she is a freelance Web designer and content writer. She specializes in Web design, development and computer-hardware topics. Williams holds an Associate of Applied Science in computer information systems.