I’m exploring the edges in CSS Properties and found one thing with no absolute solution. When I give border property with some value to an element,
eg:

border: 2px solid red,

the four sides of an element actually not occupies 2px, instead it takes only 1.6px. Where is the rest 0.4px going?

Do you know how to indicate how to do it?
Thank you

(not being a nitpicker, just confused)

Hey there and thanks for reaching out! Both border and box-shadow are properties that are applied to an element. They work pretty well together, too. :)

For example, you can have an orange bottom border on a box, then apply a dark box shadow on it:


.my-element {
height: 100px;
width: 100px;
border-bottom: orange;
box shadow: 3px 3px 3px #000; /* Sets a black shadow to the right and bottom and blurs it a smidge */
}


Who is this Chris you are trying to speak to?

Would like to see the list of available border style properties here. Believe that would be helpful.

hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Also, you insight/opinion on these styles. I see solid, dotted, dashed frequently but not the others…are they going out of style?…are they being deprecated?

All the best,

John

border-radius is a different property, it is not included in the shorthand border, but if you are looking for it, you can also find it in the almanac: https://css-tricks.com/almanac/properties/b/border-radius/