What is the Box Model in CSS

Border width, color, and radius

You can further customize the border by setting its width, color, and radius:

1p {
2  border-style: solid;
3  border-width: 4px;
4  border-color: red;
5  border-radius: 10px;
6}

The border-width property accepts either numeric values such as 2px, 1rem, and 0.25em, or keyword values such as thin, medium, and thick.

The border-color property defines the border color using the same methods we discussed in the CSS colors lesson.

And finally, the border-radius property defines the radius to create a rounded border. It accepts either length values or percentage values. To make the border completely rounded, you can set the border-radius to larger than or equal to 50%.

Border sides

Besides the properties discussed above, there are also properties that allow you to customize individual sides of the border. For example:

1p {
2  border-top-style: solid;
3  border-right-style: dotted;
4  border-bottom-style: double;
5  border-left-style: dashed;
6}

Similar variants also exist for border-width, border-color, and border-radius.

If you want something simpler when customizing individual sides of the border, you can use the same properties border-style, border-width, border-color, and border-radius, which are mentioned above, but pass multiple values to them. The syntax is as follows:

1border-style: <top> <right> <bottom> <left>;
2border-style: <top> <left_and_right> <bottom>;
3border-style: <top_and_bottom> <left_and_right>;
4border-style: <all>;

The same pattern holds for border-width, border-color, and border-radius.

The shorthand

Lastly, CSS offers an ultimate shorthand property, border, which allows you to customize width, style, and color together. However, you cannot customize individual sides with this property.

1p {
2  border: 2px dashed red;
3}

Padding

Inside the box, you can add space between the border and the content. This space is called padding, defined by the padding property.

1padding: <top> <right> <bottom> <left>;
2padding: <top> <left_and_right> <bottom>;
3padding: <top_and_bottom> <left_and_right>;
4padding: <all>;

Hint: Use the Developer Tools to inspect the element. It will help you see the actual padding.

Alternatively, you can always set individual paddings using properties padding-top, padding-right, padding-bottom, and padding-left.

Margin

Similarly, you can add space outside the border so that two neighboring elements do not touch each other. This space is called margin, defined by the margin property. For instance, here we have two <span> elements:

The margin property works similarly to the padding property.

1margin: <top> <right> <bottom> <left>;
2margin: <top> <left_and_right> <bottom>;
3margin: <top_and_bottom> <left_and_right>;
4margin: <all>;

Hint: Use the Developer Tools to inspect the element, it will help you see the actual margin.

Resizing elements

After understanding the box model, let's discuss how to change the size of the box using width and height properties.

1<p>Lorem ipsum dolor . . .</p>

1p {
2  border: 2px solid black;
3  width: 200px;
4  height: 50px;
5}

Deal with content overflow

Notice that the content is too big to fit inside the 200 x 50px box. By setting an overflow property, you can customize how the overflow is handled.

When set to hidden, the overflow will be cropped off.

When set to scroll, the overflow will be cropped off, but a scrollbar will be added, allowing you to scroll down to see the full content.

Or you can simply set it to auto, which adds a scrollbar only when necessary.

Box sizing

There is one more issue with this box. Consider this example:

1<p>Lorem ipsum dolor . . .</p>

1p {
2  border: 2px solid black;
3  width: 200px;
4  height: 50px;
5}

Try to do this on your own machine and inspect this paragraph element using the Developer Tools, and you will see that even though we defined this element to be 200px wide and 50px tall, it is, in fact, 204 x 54px.

This is because when you define the box size, the browser assumes you refer to the size of the content, meaning it ignores the padding and the border itself. For example, let's make the border thicker and add a padding. Notice that the size of the content box remains the same.

1p {
2  border: 10px solid black;
3  padding: 10px;
4
5  width: 200px;
6  height: 50px;
7}

This can be counterintuitive sometimes because when we define the box size, we usually mean the size of the border, not just the content. To fix this issue, you can overwrite the browser's default actions by setting the box-sizing property to border-box.

1p {
2  box-sizing: border-box;
3
4  border: 10px solid black;
5  padding: 10px;
6
7  width: 200px;
8  height: 50px;
9}

By default, this property is set to content-box, so the browser will count the content size as the box size. When you set it to border-box, the browser will take padding and border into account when calculating the box size.

Minimum and maximum sizes

Besides setting a fixed dimension for the elements, you can also be more flexible by specifying the maximum or minimum sizes or both. For example, you can define the maximum width of the <p> element as 400px.

Open this demo in a new browser tab, and resize your browser window. Make sure its width is less than 400px. Slowly make the window wider, and notice that the <p> element grows with it until it reaches 400px and stops growing.

The minimum value works the same way, just in the opposite direction.

1p {
2  border: solid 2px;
3  min-width: 400px;
4}

You can specify both maximum and minimum values to ensure the element size is always within the defined limit.

This is crucial for a design concept called responsive design, which we will discuss later.