Lecture

Border

The Border refers to the boundary line of an element.

You can use the CSS border property to draw a line around an element's boundary and specify the style, width, and color of this line.


Border Styles

Borders can be specified as solid, dotted, double, etc.

Example of using the border-style property
.box { border-style: solid; /* Solid line */ }

Other styles include dotted (dotted line), dashed (dashed line), and double (double line), among others.


Border Width

The border-width property allows you to control the thickness of the border.

Example of using the border-width property
.box { border-width: 5px; /* Width of 5 pixels */ }

Border Color

You can specify the border color with border-color, using text such as "red" or through rgb and hex codes.

Example of using the border-color property
.red-box { border-color: red; /* Red border */ } .green-box { border-color: #00ff00; /* Green border */ } .blue-box { border-color: rgb(0, 0, 255); /* Blue border */ }

Setting Borders Individually

You can set different styles, widths, and colors for each side of the border using border-top, border-right, border-bottom, border-left properties.

Setting different borders for each side
.box { border-top: 3px solid blue; /* 3px solid blue line on top */ border-right: 5px dashed green; /* 5px dashed green line on right */ border-bottom: 2px dotted red; /* 2px dotted red line on bottom */ border-left: 4px double purple; /* 4px double purple line on left */ }

Follow along by entering the highlighted portions of the code.

Mission
0 / 1

In CSS, using the border-color property allows you to adjust the thickness of the border.

True
False

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help

HTML
CSS
Loading...