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