Primer CSS Colors Border Color

Last Updated : 12 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates 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 a highly reusable model.

In this article, we will learn about the Border Color element in Primer CSS. One such style element of the Primer CSS is Border Color. Border Color as the name suggests is used to color the border of an element.

Classes: Below is the given list of all border color classes present in Primer CSS along with their color:

.color-border-default – This class applies the default grey border color to the element. It is applied by default.
.color-border-overlay – This class when applied gives a slightly dark shade of white to the element’s border color.
.color-border-emphasis – This class when applied gives a dark black color to the element’s border color.
.color-border-accent – This class when applied gives a light blue color to the element’s border color.
.color-border-accent-emphasis – This class when applied gives a deep blue color to the element’s border color.
.color-border-success – This class when applied gives a light green color to the element’s border color.
.color-border-success-emphasis – This class when applied gives a dark green color to the element’s border color.
.color-border-attention – This class when applied gives a light yellowish color to the element’s border color.
.color-border-attention-emphasis – This class when applied gives a darkish yellowish color to the element’s border color.
.color-border-severe – This class when applied gives a light brown color to the element’s border color.
.color-border-severe-emphasis – This class when applied gives a dark brown color to the element’s border color.
.color-border-danger – This class when applied gives a light red color to the element’s border color.
.color-border-danger-emphasis – This class when applied gives a dark red color to the element’s border color.
.color-border-done – This class when applied gives a light violet color to the element’s border color.
.color-border-done-emphasis – This class when applied gives a dark violet color to the element’s border color.
.color-border-sponsors – This class when applied gives a light pink color to the element’s border color.
.color-border-sponsors-emphasis – This class when applied gives a dark pink color to the element’s border color.

Syntax:

<div class= “…” > </div>

Note:
1. By default, a color is provided to the border of the element by Primer CSS. Adding border classes to the elements helps to override the default value.
2. Here we have shown the examples and syntaxes using the <div> element but you can use any element.

Example 1: In the below example, we have created three boxes with text written in them and given them different border colors with the help of primer border color classes.

Full Code:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Border Color </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div style="background-color:black; color: lightgreen;" > 
        <h2>GeeksforGeeks</h2> 
        <h3>Primer CSS Border Color</h3> 
        <div class="border color-border-success-emphasis" 
        style="height: 200px; width: 200px;  margin: 2em;"> 
            This is the first text box with sample text.  
            This article will be published in GeeksforGeeks website. 
        </div> 
        <div class="border color-border-done-emphasis" 
        style="height: 200px; width: 200px;   margin: 2em;" > 
            This is the second text box with sample text.  
            This article will be published in GeeksforGeeks website. 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: We have added borders of different colors to the buttons using the Primer CSS Classes.

Full Code:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Toast animation in </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body style="color: white; background-color: black;"> 
    <div> 
        <h2>GeeksforGeeks</h2> 
        <h3>Primer CSS Border Color</h3> 
        <button class="btn color-border-success-emphasis" 
            type="button"> 
            Button 1 
        </button> 
        <button class="btn color-border-danger-emphasis" 
            type="button"> 
            Button 2 
        </button> 
    </div> 
</body> 
</html>