How to make a complex line in pure CSS ?

Last Updated : 25 Aug, 2022

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> 