TLDR: Yes.

Here's a bit of a demo to clear up a bit of confusion that I had over CSS borders:

On the left, I've created two elements that have the same width and height. I added border-left and border-right to one element in green and border-top and border-bottom to the other in purple. I then added some CSS to overlap these two elements.

On the right, I've created an element with the same width and height as the previous two elements. I added border-top and border-bottom in purple and border-left and border-right in green.

The keen-eyed among you may notice there's a distinctive difference between these two images. Namely, the way the corners of the border behave. If an element has borders that don't touch, the border in question is only as long as the element it is bordering. If an element has borders that do touch, the border extends past the dimensions of the element to meet the joining border halfway, splitting the difference.

Put a more verbose way....

If you add a border-bottom to an element without a border-right or border-left, the length of the bottom border is equal to the width of the element.

If you add a border-bottom to an element with a border-right and no border-left, the length of the bottom border is equal to the width of the element and 1/2 the width of the right border, cut diagonally. The length of the right border is equal to the height of the element and 1/2 of the width of the bottom border, cut diagonally.

If you add a border-bottom to an element with a border-left and no border-right, the length of the bottom border is equal to the width of the element and 1/2 the width of the left border, cut diagonally. The length of the left border is equal to the height of the element and 1/2 of the width of the bottom border, cut diagonally.

If you add a border-bottom to an element with a border-right and a border-left, the length of the bottom border is equal to the width of the element + 1/2 the width of the right border, cut diagonally + 1/2 of the width of the left border, cut diagonally. The length of the right border is equal to the height of the element and 1/2 of the width of the bottom border, cut diagonally. The length of the left border is equal to the height of the element and 1/2 of the width of the bottom border, cut diagonally.

If you add a border-top to an element without a border-right or border-left, the length of the top border is equal to the width of the element.

If you add a border-top to an element with a border-right and no border-left, the length of the top border is equal to the width of the element and 1/2 the width of the right border, cut diagonally. The length of the right border is equal to the height of the element and 1/2 of the width of the top border, cut diagonally.

If you add a border-top to an element with a border-left and no border-right, the length of the top border is equal to the width of the element and 1/2 of the width of the left border, cut diagonally. The length of the left border is equal to the height of the element and 1/2 of the width of the top border, cut diagonally.

If you add a border-top to an element with a border-left and border-right, the length of the top border is equal to the width of the element + 1/2 of the width of the right border, cut diagonally + 1/2 of the width of the left border, cut diagonally. The length of the left border is equal to the height of the element and 1/2 of the width of the top border, cut diagonally. The length of the right border is equal to the height of the element and 1/2 of the width of the top border, cut diagonally.

If you add a border-right to an element without a border-top or border-bottom, the length of the right border is equal to the height of the element.

If you add a border-right to an element with a border-top and no border-bottom, the length of the right border is equal to the height of the element and 1/2 of the width of the top border, cut diagonally. The length of the top border is equal to the width of the element and 1/2 of the width of the right border, cut diagonally.

If you add a border-right to an element with a bottom-border and no border-top, the length of the right border is equal to the height of the element and 1/2 of the width of the bottom border, cut diagonally. The length of the bottom border is equal to the width of the element and 1/2 of the width of the right border, cut diagonally.

If you add a border-right to an element with a border-top and border-bottom, the length of the right border is equal to the height of the element + 1/2 of the width of the top border, cut diagonally + 1/2 of the width of the bottom border, cut diagonally. The length of the top border is equal to the width of the element and 1/2 of the width of the right border, cut diagonally. The length of the bottom border is equal to the width of the element and 1/2 of the width of the right border, cut diagonally.

If you add a border-left to an element without a border-top or border-bottom, the length of the left border is equal to the height of the element.

If you add a border-left to an element with a border-top and no border-bottom, the length of the left border is equal to the height of the element and 1/2 of the width of the top border, cut diagonally. The length of the top border is equal to the width of the element and 1/2 of the width of the left border, cut diagonally.

If you add a border-left to an element with a border-bottom and no border-top, the length of the left border is equal to the height of the element and 1/2 of the width of the bottom border, cut diagonally. The length of the bottom border is equal to the width of the element and 1/2 of the width of the left border, cut diagonally.

If you add a border-left to an element with a border-top and border-bottom, the length of the left border is equal to the height of the element + 1/2 of the width of the top border, cut diagonally + 1/2 of the width of the bottom border, cut diagonally. The length of the top border is equal to the width of the element and 1/2 of the width of the left border, cut diagonally. The length of the bottom border is equal to the width of the element and 1/2 of the width of the left border, cut diagonally.

This is the reason why borders can be used to create triangles!

Steps to create a triangle using borders:

• Create an element with 0 height and 0 width.

• Add a border to that element with whatever size you'd like the triangle to be as the width, solid as the style and transparent as the color. This makes an invisible square of a border.

• If you're looking to make a triangle pointing down, change the border-top-color to whatever color you'd like the triangle to be.

• If you're looking to make a triangle pointing to the right, change the border-left-color to whatever color you'd like the triangle to be.

• If you're looking to make a triangle pointing to the left, change the border-right-color to whatever color you'd like the triangle to be.

• If you're looking to make a triangle pointing upward, change the border-bottom-color to whatever color you'd like the triangle to be.