Primer CSS Borders

Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.

Primer CSS Borders is a utility class that applies borders to a div container of HTML by simply applying the provided class. We can even customize the border’s style.

Primer CSS Borders Types and Classes:

Default Border: It uses the class border and creates a default border with a solid line around the div container.
Border Style: It uses the class border-dashed and creates a border with a dashed line around the div container.
Rounded Corners Border: It uses the following different classes to apply different amounts of roundness to the borders.
Responsive Borders: The borders can be responsive by using the following classes.
Border Colors: We can use the following border, color classes.

Syntax: Create a container with a border as follows:

<div class="border">
    Welcome to w3wiki. It is a 
    computer science portal for Beginner. 
    It has tutorials for Data Structures, 
    Algorithms, Programming Languages,
    etc.
</div>

Example 1: In the following example, we have a container with a paragraph containing borders with rounded borders.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>w3wiki | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">w3wiki</h1>
            </div>
            <strong>Primer CSS Borders</strong>
            <br />
            <br />
        </center>
        <div class="border rounded-2 p-2">
            Welcome to w3wiki. It is a computer 
            science portal for Beginner. It has tutorials 
            for Data Structures, Algorithms, Programming 
            Languages, etc.
        </div>
    </div>
</body>
</html>

Output:

Example 2: In the following example, we have some containers with different border colors.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>w3wiki | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">w3wiki</h1>
            </div>
            <strong>Primer CSS Borders</strong>
            <br />
            <br />
        </center>
        <div class="border rounded-2 p-2 
                    color-border-success-emphasis">
            Welcome to w3wiki.
        </div>
        <br />
        <div class="border rounded-2 p-2 
                    color-border-danger-emphasis">
            It is a computer science portal for Beginner.
        </div>
        <br />
        <div class="border rounded-2 p-2 
                    color-border-sponsors-emphasis">
            It has tutorials for Data Structures, Algorithms, 
            Programming Languages, etc.
        </div>
    </div>
</body>
</html>

Output:

Example 3: In the following example, we have different containers with responsive borders. We are zooming to view the borders of different sizes.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>w3wiki | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">w3wiki</h1>
            </div>
            <strong>Primer CSS Borders</strong>
            <br />
            <br />
        </center>
        <div class="border-sm rounded-2 p-2 
                    color-border-success-emphasis">
            Welcome to w3wiki.
        </div>
        <br />
        <div class="border-md rounded-2 p-2 
                    color-border-danger-emphasis">
            It is a computer science portal for Beginner.
        </div>
        <br />
        <div class="border-lg rounded-2 p-2 
                    color-border-sponsors-emphasis">
            It has tutorials for Data Structures, Algorithms, 
            Programming Languages, etc.
        </div>
    </div>
</body>
</html>

Output:

Reference: https://primer.style/css/utilities/borders

HTML

HTML

HTML

Contact Us