How to make a complex line in pure CSS ?

Last Updated : 23 Jul, 2025

In this article, we will learn how to make a complex line in Pure CSS. We can achieve this task by creating the CSS border property around the HTML div element. 

Property Used:

  • width: This property is used to define the width of the element.
  • height: This property is used to define the height of the element.
  • border-left: This property is used to define the border at the left position.
  • border-right: This property is used to define the border at the right position.
  • border-bottom: This property is used to define the border at the bottom position.
  • border-top: This property is used to define the border at the top position.

Example 1: In the below code, we will make use of the above property to create a complex line.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks</title>

    <style>
        .GFG {
            background-color: green;
            padding: 40px;
            margin: 40px;
        }

        .GFG .line {
            width: 50px;
            height: 50px;
            border-left: 5px solid black;
            border-bottom: 5px solid black;
        }

        .GFG .line:first-child {
            border-top: 5px solid black;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </center>
    <div class="GFG">
        <div class="line"></div>
        <div class="line"></div>
    </div>
</body>

</html>

Output:

 

Example 2: In the below code, we will make use of the above property to create a complex line.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks</title>

    <style>
        .GFG {
            background-color: green;
            padding: 40px;
            margin: 40px;
        }

        .GFG .line {
            width: 50px;
            height: 50px;
            border-right: 5px solid black;
            border-bottom: 5px solid black;
        }

        .GFG .line:first-child {
            border-top: 5px solid black;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </center>
    <div class="GFG">
        <div class="line"></div>
        <div class="line"></div>
    </div>
</body>

</html>

Output:

 
Comment

Explore