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

Posted by TotalDC

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.

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

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

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

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

CSS dashed border

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: