Primer CSS Responsive Borders

Last Updated : 05 May, 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

A Border is a component that is used to create borders of various shapes, sizes, and styles. In Primer CSS, we have some classes to make the border responsive according to the screen size. In this article, we will discuss Primer CSS Responsive Borders.

Primer CSS Responsive Border Classes:

border-(sm|md|lg|xl): This class when applied to any element adds a border on all sides to that element if it is viewed at or above the breakpoint.
border-(sm|md|lg|xl)-0: This class when applied to any element removes the border on all sides of that element if it is viewed at or above the breakpoint.
border-(sm|md|lg|xl)-(top|right|bottom|left): This class when applied to any element adds a border to a specific side when it is viewed at or above the breakpoint.
border-(sm|md|lg|xl)-(top|right|bottom|left)-0: This class when applied to any element removes the border to a specific side when it is viewed at or above the breakpoint.

Syntax:

<div class="Responsive-Borders-Classes">
   ...
</div>

Note: Here we have shown the syntax with the <div> tag, but you can add a border to any element like a button, paragraph, and so on.

Example 1: We have created a container that has borders on all sides for a medium screen and has no border on top for a large screen.

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">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2> Responsive Border </h2>
    
    <div class="border-md border-lg-top-0" 
         style="width: 300px; height: 250px; 
                margin: 1.5em;">
        This is the sample container element.
    </div>
</body>

</html>

Output:

Example 2: We have created a responsive border for a container that will have a border only at the bottom for large screens and borders on all sides for extra-large screens.

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">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2> Responsive Border </h2>

    <div class="border-lg-bottom border-xl" 
         style="width: 300px; height: 250px; 
                margin: 1.5em;">
        This is the sample container element.
    </div>
</body>

</html>