How to Add Border to CSS Triangle?

appealing design elements. With the help of the CSS “border-width” property, the triangle is created by providing the same value for all sides and setting the value of “0” for the “top” position. By using CSS, customization such as changing thickness, roundness, color, etc. can also be done. They can also be utilized for arrows, buttons, pointers, etc.

This article demonstrates the step-by-step procedure for adding a border to a CSS triangle.

How to Add Border to CSS Triangle?

The best way which is going to be demonstrated is by the usage of “:before” or “:after” CSS selectors. These selectors create a copy of the triangle which can be placed before or after the actual triangle and by changing the color of the new one.

Visit the below step-by-step approach for a better demonstration:

Step 1: Creation of Triangle
Suppose the div is already created inside the “<body>” tag of the HTML file. And that div has a value of “triangle-border” to its “class” attribute. Now, apply the following CSS properties to that CSS class:

.triangle-border {
 position: relative;
 width: 0;
 height: 0;
 left: 85px;
 border-style: solid;
 border-width: 0 100px 100px 100px;
 border-color: transparent transparent #000 transparent;

In the above code snippet:

  • Set the value of “relative” and “85px” to the CSS “position” and “left” properties. It sets the position of the div on the webpage.
  • Next, provide the values of “0” for both the “height” and “width” properties to create a triangle space.
  • Also, set the “solid” as a value for the “border-style” property to declare the type of border going to be displayed or created.
  • After that, set the value of “0” to the border width from the top position and “100px” to the left, right and bottom sides. This creates a structure of the triangle on the webpage.
  • In the end, set the value of “transparent” to all sides except the left side and provide it with a value of black to the “border-color” property. This makes the triangle visible on the webpage.

After the execution of the above code snippet:

The output shows that the triangle has been created.

Step 2: Adding Border to Triangle Using CSS Selector
After the creation of the triangle shape on the webpage. Now, attach the “:before” selector with the “triangle-border” class and set the following CSS properties:

.triangle-border::before {
 content: '';
 position: absolute;
 left: -120px;
 top: -12px;
 width: 0;
 z-index: -1;
 height: 0;
 border-style: solid;
 border-width: 0 120px 120px 120px;
 border-color: transparent transparent teal transparent;

In the above code snippet:

  • First, the empty value is provided to the “content” property and the “absolute” value is set to the “position” property.
  • Next, utilize the “left” and “top” properties according to your webpage design. They are utilized to position the div on top of the previously created div.
  • After that, utilize the same properties that are used in the above step for the creation of a triangle such as the “border-style”,”border-width”, and “border-color” properties.

After the execution of the above code snippet, the webpage appears like this:

The above snapshot of the webpage shows that the border of the “teal” color has been added to the triangle.


To add a border to the CSS triangle, utilize the “:before” or “:after” CSS selectors. After that, utilize the “border-color” property and provide only color to the “left” side and “transparent” to all remaining sides. After the creation of the triangle, use the CSS “:before” selector and place it on the backside of the previously generated triangle using the “left”, “top” and “z-index” properties. This article has demonstrated the procedure to add a border to the CSS Triangle.

About the author

Abdul Moeed

I'm a versatile technical author who thrives on adaptive problem-solving. I have a talent for breaking down complex concepts into understandable terms and enjoy sharing my knowledge and experience with readers of all levels. I'm always eager to help others expand their understanding of technology.