Tachyons Theming Border Radius

Last Updated : 08 Jun, 2022

In this article, we will learn how we can use Border Radius for theming in our website using the Tachyons toolkit. Tachyons is a toolkit used to create a responsive website. This used to define the border-radius style to the element it is applied.

Syntax:

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

Tachyons Theming Border Radius Classes:

br0: This class is used to define a border radius of 0rem.
br1: This class is used to define the border radius of .125rem.
br2: This class is used to define the border radius of .25rem.
br3: This class is used to define the border radius of .5rem.
br4: This class is used to define the border radius of 1rem.
br-100: This class is used to define the border radius of 100%.
br-pill: This class is used to define the border radius of 9999px.
br–bottom: This class is used to enable the border radius only on the bottom, by setting the other sides to 0.
br–top: This class is used to enable the border radius only on the top, by setting the other sides to 0.
br–right: This class is used to enable the border radius only on the right, by setting the other sides to 0.
br–left: This class is used to enable the border radius only on the left, by setting the other sides to 0.

Example 1: In this example, we will set the border radius to .25rem.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="ba br3">GeeksforGeeks</h1> 
</body> 
  
</html>

Output:

Example 2: In this example, we will set the border radius to 100%.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="ba br-100">GeeksforGeeks</h1> 
</body> 
  
</html>