Border

The border is the visible line that goes around the padding and content of an element, acting as a frame

It is defined by its width, style, and color

characteristics of borders

• Location: A border is situated between the padding and the margin.
• Visual appearance: Borders can have various styles, widths, and colors. A background color or image applied to an element will extend to the outer edge of its border
• Effect on size: In the standard box model (box-sizing: content-box), the border thickness adds to the element's total width and height. With the alternate box model (box-sizing: border-box), the border is included inside the specified width and height, shrinking the content area

Box Sizing

The box-sizing CSS property determines how an element's total width and height are calculated

This property is crucial for building layouts and managing element sizes, as it controls whether padding and borders are included within the specified dimensions or added to them

There are two main values for the box-sizing property
content-box

The width and height properties define only the size of the element's content area

Any padding and borders are added outside the specified dimensions, increasing the total size of the element

border-box

The width and height properties define the total size of the element, including the content, padding, and border