How to Make Inner and Outer Borders in CSS

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

Instructions

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

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

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