Skip to main content


This is the fourth part in my CSS Styling tutorials, in which I will be covering Borders.

Borders around elements come between the elements margin and padding. So, if the element has padding, the border will be away from the element whereas if the element only has margin, the border will be next the element but away from other elements.

Basic Structure:
The basic border attribute takes three arguments; Width, Type, Colour. The below code would give a solid white border that is 5 pixels width...

  1. border: 5px solid #ffffff;

Or this code would give a dashed black border of 3 pixels width...

  1. border: 3px dashed #000000;

There is also;

Setting Sides:
Just like margin and padding, you can set individual sides of borders...

  1. border-right: 3px dashed #000000;
  2. border-left: 1px dotted #ffffff;
  3. border-top: 3px solid #000000;
  4. border-bottom: 13px inset #ffffff;
  5. </cs>
  7. <strong>Individual Settings:</strong>
  8. You can also set the properties individually...
  10. <css>
  11. border-style: solid;
  12. border-width: 5px; //or medium etc.
  13. border-color: #000000;

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. .strong {
  5. background-color: #000;
  6. color: #fff;
  7. width: 300px;
  8. height: 100px;
  9. border: 10px solid #000;
  10. // Thick black border of 10 pixels
  11. }
  13. .thin {
  14. background-color: #000;
  15. color: #fff;
  16. width: 300px;
  17. height: 100px;
  18. border: 2px solid green;
  19. // Thin green border of 2 pixels
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class='strong'>Strong/Thick Border</div>
  25. <div class='thin'>Weak/Thin Border</div>
  26. </body>
  27. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.