Tachyons Theming Borders
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= <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= <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> |
Output:
Reference: https://tachyons.io/docs/themes/borders/
Please Login to comment...