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.
.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.
.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.
.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.
.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.
In CSS, using the border-color
property allows you to adjust the thickness of the border.
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help