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 GeeksforGeeks. It is a
computer science portal for geeks.
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.
<!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>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Primer CSS Borders</strong>
<br />
<br />
</center>
<div class="border rounded-2 p-2">
Welcome to GeeksforGeeks. It is a computer
science portal for geeks. 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.
<!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>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Primer CSS Borders</strong>
<br />
<br />
</center>
<div class="border rounded-2 p-2
color-border-success-emphasis">
Welcome to GeeksforGeeks.
</div>
<br />
<div class="border rounded-2 p-2
color-border-danger-emphasis">
It is a computer science portal for geeks.
</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.
<!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>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Primer CSS Borders</strong>
<br />
<br />
</center>
<div class="border-sm rounded-2 p-2
color-border-success-emphasis">
Welcome to GeeksforGeeks.
</div>
<br />
<div class="border-md rounded-2 p-2
color-border-danger-emphasis">
It is a computer science portal for geeks.
</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