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.”

1

Open your HTML file in an editor – Notepad will do, but a line-numbered code editor works best – and find the “

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

Content...

2

Open the stylesheet file for your Web page or place the CSS code between “

3

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.

4

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.

5

Style the pseudo-element so it goes behind the div:

my_borders:after {

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

6

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.

7

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.