Common CSS Box Model Properties Showcase

This template demonstrates the most commonly used CSS box model properties with examples. Each section covers a key property, its possible values, and a visual example.

Box Model Properties

`width`

Sets the width of an element's content area, e.g., 200px, 50%, auto.

Width: 200px

`height`

Sets the height of an element's content area, e.g., 100px, 50vh, auto.

Height: 100px

`margin`

Sets the outer spacing around an element, e.g., 20px, 10px 20px, auto.

Margin: 20px

`padding`

Sets the inner spacing within an element, e.g., 15px, 10px 20px.

Padding: 20px

`border`

Sets the border around an element, e.g., 1px solid black, 2px dashed red.

Border: 2px solid red

`border-width`

Sets the thickness of the border, e.g., 1px, medium, 2px 4px.

Border-width: 4px

`border-style`

Sets the style of the border, e.g., solid, dashed, dotted.

Border-style: dashed

`border-color`

Sets the color of the border, e.g., red, #000, rgb(0, 255, 0).

Border-color: green

`border-radius`

Rounds the corners of an element, e.g., 5px, 10px 20px, 50%.

Border-radius: 10px

`box-sizing`

Defines how width and height are calculated, e.g., content-box, border-box.

Box-sizing: border-box