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:
Primer CSS Responsive Borders
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>
Output:
Primer CSS Responsive Borders
Reference: https://primer.style/css/utilities/borders#responsive-borders
Similar Reads
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 b
3 min read
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 b
3 min read
Primer CSS Responsive Container Padding Primer CSS is a free open-source CSS framework based on concepts that set the foundation for basic design components such as space, font, and color. Because of their systematic structure, these patterns are both stable and interoperable. Its CSS approach is informed by Object-Oriented CSS concepts,
3 min read
Primer CSS Rounded Corners Border 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
3 min read
Primer CSS Responsive Padding Primer CSS is a free open-source CSS framework built on systems that lay the groundwork for basic style elements like spacing, typography, and color. Our patterns are both stable and interoperable because of their systematic structure. Object-Oriented CSS principles, core CSS, and BEM architecture i
3 min read
Primer CSS Responsive Margins 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
2 min read