CSS Borders For Beginners
Similar to padding, borders can be inside or outside your HTML element. The biggest difference between the two is that you can see borders, while you can't see padding.
Borders have three properties: border-style, border-width and border-color, all of which are fairly self-explanatory.
Like most visual changes to elements in CSS, borders are styled in a top-right-bottom-left (TRBL) direction.
More often than not, the borders of your element will be the same. If so, you can use the short-hand syntax:
If you need, you can always add an additional style afterwards to change some of the borders.
Notice it says border-bottom-width. You can also use styles like border-top-width, border-left-width or border-right-width. The same can be said for the styles (border-[side]-style) or colour (border-[side]-colour).
If you are styling borders, this is the only required style. Borders default to black in colour and 1px in size, but without a style they won't show up.
There are 10 different styles you can choose from:
By default, elements have a border of none.
dashed and dotted borders are supported across all browsers, but they don't always look the same.
All browsers have their own unique way of displaying borders. The dotted borders are pretty much the same across the board, except for Safari where apparently a "dot" means a "square". dashed borders, on the other hand, vary greatly across browsers, except for Chrome and Opera (which makes sense, since they both run on a webkit engine). The length of the lines and the spaces between are also very inconsistent.
double borders are also inconsistent across browsers, although not nearly as bad.
Chrome, Firefox and Opera all show the same thing, but Safari and Edge don't. Edge has some blur between the double lines while Safari just kinda did its own thing.
When it comes to groove, ridge, inset and outset border styles, you'll also notice that if you use a colour that can't get any darker (eg: black), they appear solid. You'll want to use a lighter colour or a off-black colour to have the desired effect:
The final two styles, none and hidden just hide the border. The biggest difference is that none removes the border all together, but hidden just hides it. It's like not having a bag of money versus hiding a bag of money. You can't see either one but one of them still exists.
For the most part, you will probably be using none or solid.
border-width is fairly self explanatory: it's the width of the border. This can be in pixels (px), points (pt), em, rem, vh, vw, etc. The only exception is that borders can't be percentages. They even have some keywords you can use as well, such as "thin", "medium" and "thick".
border-color is also fairly self explanatory: it's the colour of the border. This can be done with hex values, names, rgba, hsla or any other way. You can use rgba or hsla if you want a partly transparent border.
Like the other border styles, you can change each side to be a different colour too.
Putting it all together
If you wanted to recreate the image at the top of the article, you could do something like this:
If you want to curl the corners of your elements, you'll want to use border-radius, or if you want to put the borders inside the element instead of outside, you'll want to use box-sizing.
Do you have any questions about CSS borders? Let me know in the comments!