Primer CSS Default Border

Last Updated : 12 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach ensures that our styles are consistent and interoperable with each other. It features a highly composable spacing scale, customizable typography, and meaningful colors. It is highly reusable and flexible and is created with GitHub’s design system.

A Border is a component that is used to create borders of various shapes, sizes, and styles. The most basic and simple border given to us by the Primer CSS is the Default Border. The default border has a solid shape, with a size of 1px, and with a default gray color.

Primer CSS Default Border Class:

border: This class is used to create a default border.

Syntax:

<div class="border">
    ...
</div>

Example 1: The following example will demonstrate default borders in Primer CSS.

HTML

<!DOCTYPE html> 
<html>   
<head> 
    <title> Primer CSS Default Border </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
    
<body> 
    <div class="text-left"> 
        <h1 class="color-fg-success">GeeksforGeeks</h1> 
        <h3> Primer CSS Default Border </h3> 
    </div> 
    <br> 
    <div class="border"> <!--Default Border-->
        This Is A Default Border 
    </div> 
    <div class="border"> 
        This Is Another Default Border 
    </div> 
    <div class="border"> 
        This Is A Default Border Again 
    </div> 
</body> 
</html>

Output:

Example 2: The following example will demonstrate the difference between a text without any border and a text with a default border in Primer CSS.

HTML

<!DOCTYPE html> 
<html>   
<head> 
    <title> Primer CSS Default Border </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
    
<body> 
    <div class="text-left"> 
        <h1 class="color-fg-success">GeeksforGeeks</h1> 
        <h3> Primer CSS Default Border </h3> 
    </div> 
    <br> 
    <div class="not_border">  
        This Is Without A Border 
    </div> 
    <div class="border"> <!--Default Border-->
        This Is A Default Border 
    </div> 
    <div class="not_border"> 
        This Is Without A Border Again 
    </div> 
</body> 
</html>