Everything You Need To Know About Borders In CSS

Posted by TotalDC

As you may guess CSS lets you apply borders to most HTML elements.

To make a border all you need is to use a border tag. First, you need to specify the 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, 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 the border style you can set a second variable if you are using the short version of the 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 the short version sets the color.

For example:

p { border: 2px solid red}

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

CSS solid border example
p { border: 2px dotted red}

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

CSS dotted border example
p { border: 2px dashed red}

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

CSS dashed border example

Now if you read all previous tutorials, you then you should 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 CSS files and see what happens when you change things.