Everything You Need To Know About Borders In CSS
Posted by TotalDCAs 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.
p { border: 2px dotted red}
This would give you a dotted red border which would be 2 pixels wide around your paragraph.
p { border: 2px dashed red}
This would give you a dotted red border which would be 2 pixels wide around your paragraph.
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.