CSS Guide Part 7 – Everything You Need To Know About Borders

As you maybe guessing CSS lets you apply borders to most HTML elements.

To make a border all you need is to use border tag. First you need to specify border width. Border-width sets the width of the border. Although you can just input one number in pixels and then you’ll get all border sides in equal width, but if that’s not what you want you can set all sides separately using border-top-width, border-right-width, border-bottom-width or border-left-width.

To change border style you can set second variable if you are using short version of code or just use border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.

And border-color or third value in short version sets the color.

For example:

p { border: 2px solid red}

This would give you solid red border which would be 2 pixels wide around your paragraph.

p { border: 2px dotted red}

This would give you dotted red border which would be 2 pixels wide around your paragraph.

p { border: 2px dashed red}

This would give you dotted red border which would be 2 pixels wide around your paragraph.

Now if you read all previous tutorials, you then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things.