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=
<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=
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<h1 class="ba br-100">GeeksforGeeks</h1>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/themes/border-radius/