Skip to main content
Practice

Borders

Border refers to the boundary line of an element.

Using CSS border properties, you can draw a line around the boundary of an element and specify the style, width, and color of this line.


border style

You can set the border to be solid, dotted, double, etc.

Sample Code:​

CSS
.box {
  border-style: solid; /* solid line */
}

Other styles include dotted (dotted line), dashed (dashed line), double (double line), etc.


border width

border-width allows you to adjust the thickness of the border.

Sample Code:​

CSS
.box {
  border-width: 5px; /* 5 pixels thick */
}

border color

You can specify the border color using border-color with text like "red" or RGB and hex codes.

Sample Code:​

CSS
.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 different borders for each side

Just like you can stick different kinds of tapes on each side of a box, you can set different borders for each side in CSS.

Sample Code:​

CSS
.box {
  border-top: 3px solid blue; /* 3 pixels thick, solid blue line at the top */
  border-right: 5px dashed green; /* 5 pixels thick, dashed green line on the right */
  border-bottom: 2px dotted red; /* 2 pixels thick, dotted red line at the bottom */
  border-left: 4px double purple; /* 4 pixels thick, double purple line on the left */
}

Follow along with the highlighted parts of the code to input your own.

Want to learn more?

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