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 =
< 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/
Share your thoughts in the comments
Please Login to comment...