How to add border in the clip-path: polygon() using CSS ?

Last Updated : 26 Dec, 2023

Adding a border around shapes can substantially improve the visual attractiveness of your website when it comes to web design. Using the clip-path: polygon() Property is one great and inventive approach to accomplish this. This not only allows you to make unusual shapes but also allows you to add a border that fits your design. In this article, we will learn how to create a custom shape and apply a beautiful border using CSS style.

Table of Content

clip-path: polygon() Property
Using pseudo-element ::after or ::before

We will explore both approaches for including the Border to the clip-path Property.

clip-path: polygon() Property

Clip-path Property is used to shape items on your website. By default, an element is a rectangle, but using this property, you can choose which part should be visible. The clip-path polygon() function allows you to construct customized shapes by utilizing coordinates.

In this approach, a basic square-shaped div element is created by providing 200px width and height. Now, we will use the clip-path CSS property to change the shape of this div element from square to hexagon with the help of polygon() function and coordinates. Update the custom-shape class CSS by adding the clip-path property. Now, the div element will look like a hexagon-shaped element instead of a square.

Example: This example illustrates the creation of a Polygon using the clip-path Property by setting the value as a polygon() function, which helps to define a polygon with the help of an SVG filling rule and a set of vertices.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Clip-Path CSS property</title> 
    <style> 
        h1 { 
            color: green; 
        } 
  
        .custom-shape { 
            width: 200px; 
            height: 200px; 
            background-color: #3498db; 
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%,  
                                 50% 100%, 0% 75%, 0% 25%); 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div class="custom-shape"></div> 
</body> 
  
</html>

Output:

hexagon-shaped div element

Example: In the below code example, we have used the span element as the original element and div as a border.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <link rel="stylesheet"
          href="styles.css"> 
    <title>Clip-Path polygon Border</title> 
    <style> 
        h1 { 
            color: green; 
        } 
  
        .custom-shape { 
            position: relative; 
            width: 200px; 
            background-color: black; 
            height: 200px; 
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 
                                 50% 100%, 0% 75%, 0% 25%); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        } 
  
        .border-span { 
            width:190px; 
            height:190px; 
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%,  
                                 50% 100%, 0% 75%, 0% 25%); 
            background-color: #3498db; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div class="custom-shape"> 
      <span class="border-span"></span> 
      </div> 
</body> 
  
</html>

Output:

Using pseudo-element ::after or ::before

To add a border to an element with a clip-path: polygon(); style using pseudo-elements ::after or ::before, you can create an additional pseudo-element with the same clip-path property and then apply the border to it.

Example: In this example, we will see the implementation of the above approach with an example.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Clip-Path polygon Border</title> 
    <style> 
        h1 { 
            color: green; 
        } 
  
        .custom-shape { 
            width: 200px; 
            height: 200px; 
            position: relative; 
            background-color: black; 
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 
                               50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        } 
  
        .custom-shape::after { 
            content: ""; 
            width: 190px; 
            height: 190px; 
            position: absolute; 
            background-color: #3498db; 
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,  
                               50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div class="custom-shape"></div> 
</body> 
  
</html>