Tachyons Theming Borders

Last Updated : 05 Jul, 2022

CSS border properties allow us to set the style, color, and width of the border. Tachyon is a toolkit that is used to create a responsive website.

Used Classes:

Border: The “ba” class is used to create a simple border.
Border Top: The “bt” class is used to create a border from the top.
Border Right: The “br” class is used to create a border from the right.
Border Bottom: The “bb” class is used to create a border from the bottom.
Border Left: The “bl” class is used to create a border from the left.

Border Styles:

Dashed: The “b–dashed” class is used to create a dashed border.
Dotted: The “b–dotted” class is used to create a dotted border.
Solid: The default “ba” class is used to create a solid border.

Border Widths:

bw1: This class is used to create the border of value-1.
bw2: This class is used to create the border of value-2.
bw3: This class is used to create the border of value-3.
bw4: This class is used to create the border of value-4.
bw5: This class is used to create the border of value-5.

Border Colors:

b–black: This class is used to create a border of black color.
b–near-black: This class is used to create a border of near-black color.
b–dark-gray: This class is used to create a border of dark-gray color.
b–mid-gray: This class is used to create a border of mid-gray color.
b–gray: This class is used to create a border of gray color.
b–silver: This class is used to create a border of silver color.
b–light-silver: This class is used to create a border of light-silver color.
b–light-gray: This class is used to create a border of light-gray color.
b–near-white: This class is used to create a border of near-white color.
b–dark-red: This class is used to create a border of dark-red color.
b–red: This class is used to create a border of red color.
b–orange: This class is used to create a border of orange color.
b–gold: This class is used to create a border of gold color.
b–purple: This class is used to create a border of purple color.
b–yellow: This class is used to create a border of yellow color.
b–light-purple: This class is used to create a border of light-purple color.
b–hot-pink: This class is used to create a border of hot-pink color.
b–dark-pink: This class is used to create a border of dark-pink color.
b–pink: This class is used to create a border of pink color.
b–dark-green: This class is used to create a border of dark-green color.
b–green: This class is used to create a border of green color.
b–navy: This class is used to create a border of navy color.
b–dark-blue: This class is used to create a border of dark-blue color.
b–blue: This class is used to create a border of blue color.
b–light-blue: This class is used to create a border of light-blue color.
b–lightest-blue: This class is used to create a border of the lightest-blue color.
b–washed-blue: This class is used to create a border of washed-blue color.
b–washed-green: This class is used to create a border of washed-green color.
b–washed-yellow: This class is used to create a border of washed-yellow color.
b–light-pink: This class is used to create a border of light-pink color.
b–light-yellow: This class is used to create a border of light-yellow color.
b–light-red: This class is used to create a border of light-red color.

Syntax:

<element-name class="class-name">
    ...
</element-name>

Example 1: In the below example we will make use of the above classes to demonstrate the use of border property using the border base “ba” class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body{ 
            text-align:center; 
            margin:12px;             
        }           
    </style> 
</head> 
  
<body>     
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3><br> 
   
    <div class="ba"> GeeksforGeeks</div> 
</body> 
</html> 

Output:

Example 2: In the below example we will make use of the above classes to demonstrate the use of border property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body 
        { 
            text-align:center; 
            margin:12px;             
        }            
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3><br> 
   
     <div class="ba"> GeeksforGeeks</div> <br> 
     <div class="ba b--dashed"> GeeksforGeeks</div> <br> 
     <div class="ba b--dotted"> GeeksforGeeks</div> <br> 
</body> 
</html> 