CSS Tutorial Lesson 22: Customising Box in CSS

Each element in HTML is considered a box. For example, ,

, and moreare boxes. We can customize the box using css styles by manipulating its various properties like width, height, padding, margin ,background-color, border-style, border-width, box-shadow and more.

22.1 Width and Height

You can use width and height properties to set the dimension of a box. Typicall we use pixel (px) to specify width and height, but we can also use percentage and ems to control the size.

Example 22.1

We can customize the box using css styles by manipulating its various properties like width, height, padding, margin ,background-color, border-style, border-width, box-shadow and more.

We can customize the box using css styles by manipulating its various properties like width, height, padding, margin ,background-color, border-style, border-width, box-shadow and more.

We can also add the min-width property to specify the smallest size the box can be displayed on the browsers and the max-width property to specify the maximum size the box can be displayed on the browsers. In addition, we can also use min-height and max-height properties to specify the minimum height and maximum height the box can be displayed on the browsers respectively.
Besides, we can also use the overflow property to customize how the the content in a box can be displayed if the content within the box is larger than the box. We can add two overflow property values hidden and scroll respectively, the first is to simply hide the extra content and the second is to add a scrollbar to the box
22.2 Border
We can customize the look of the box’s border by controlling its width, border style and border color.
To control the border width, we use the border-width property. You can either use three default values thin, medium and thick to specify the border width or you can use pixels to specify the border width. You can also specify different widths for the four borders using border-top-width, border-right-width, border-bottom-width and border-left-width proeprties. However, you can combine the four properties into one by simply assigning four values to border-width, as illustrated below:
border-width: 3px 2px  1.5 px  4px
To control the border styles, we can use the border-style property. There are several border-style values, solid, dotted, dashed, double, groove, ridge, inset, outset and hidden. The values are explained in Table 22.1

Value	Border style
solid	solid line
dotted	dotted line
dashed	dashed line
double	double line
groove	line craved into the page
ridge	link stick out from the page
inset	line embedded into the page
outset	line appears coming out of screen
hidden or none	no border

Table 22.1: Border Styles
Example 22.2

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

The output

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

We can customize the look of the box’s border by controlling its width, border style and border color.

22.3 Border Colour
We can specify the border colour using the border-color property. You can also specify the colours of four borders using border-top-color, border-right-color, border-bottom-color and border-left-color properties. However, you can also specify all four colours at one go using border-color:colour1 colour2 colour3 colour4 . The values of the colours can be RGB values, Hex codes or CSS colour names.
Example 22.3

We can specify the border colour using the border-color property. You can also specify the colours of four borders using border-top-color, border-right-color, border-bottom-color and border-left-color properties

We can specify the border colour using the border-color property. You can also specify the colours of four borders using border-top-color, border-right-color, border-bottom-color and border-left-color properties

Last but not least, we can actually specify the border width, border style and border color all in one line using the border property, as illustrate in Example 22.4
Example 22.4

Last but not least, we can actually specify the border width, border style and border color all in one line using the border property

Last but not least, we can actually specify the border width, border style and border color all in one line using the border property