Skip to main content
Practice

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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.