Introduction to CSS Border Style
CSS border-style property specifies what kind of border to display. Styling anything refers to adding that extra touch which makes the final outcome stand out. It is required that attention must be paid to the finer details along with the major ones. The cascading style sheet promotes the same ideology. Not only does it focus on the major style changes, but the finer ones as well. This article will discuss the CSS property, through which we can give border to any given element. We use the CSS property border-style for defining the line style on all four sides of an element as its border.
Syntax & Parameters of CSS Border Style
Border style property is used for defining all the four (or lesser) borders for any given element. The syntax used for this property is as follows:
border-style: solid| dotted| groove| dashed| none
Now, to properly use this property we must know how changing the number of parameters will change the styling.
- If border-style is defined with two parameters or values, the first parameter will style the top and base border. The second value will decide how the left and the right border should look like.
- If border-style is followed by three-parameter or values, the first parameter defines the border style for the top, the second one decides the border-style for the left and right border and the third one defines how the bottom border will look like.
- If the border-style has four values, then the first values set the style for the top border, the second value is for the right border, the third one is for the bottom border and finally, the fourth one is for the left border.
- If there is only one value for border-style, then that value sets the style for all four borders.
- The universal values for this property are initial, inherit and unset.
- The most used border styles are solid, dotted, dashed, groove, ridge, inset, outset. You can try using each of these to see the respective outcomes.
Examples of How Border Style Works in CSS?
We will look into some examples now, to see how border-style works.
1. Using Border Style with One Parameter, for Different Elements
We will be using external CSS for this example (namely, border.css), hence, the first step will be to create a CSS file. We will define style for heading element i.e. <h2>. The definition should be as follows:
h2{
color: blueviolet;
border-style: dotted;
}
Additionally, we will declare and define two more classes that can be used with any other element. The classes should be coded in the following manner:
4.5 (2,560 ratings)
View Course
.cls1{
color: crimson;
border-style:solid ;
}
.cls2{
color: darkgreen;
border: inset;
}
The final CSS code should look like this:
CSS Code:
h2{
color: blueviolet;
border-style: dotted;
}
.cls1{
color: crimson;
border-style:solid ;
}
.cls2{
color: darkgreen;
border: inset;
}
Once the CSS file is coded and saved, we will move on to the HTML coding part. First of all, we will call the style sheet. Then we will make use of the elements and classes that we have styled in the CSS file, to see the output. The HTML code should look similar to this:
HTML Code:
<html>
<head>
<title>Testing border-style</title>
<link rel = "stylesheet" href = "border.css">
</head>
<body>
<h2>Testing border style for heading</h2>
<h3 class="cls1">Testing border style for first class</h3>
<p class="cls2">Testing border style for second class</p>
</body>
</html>
Save this html file and access it through a browser. The output for different border styling should be similar to the screenshot below:
Output:
2. Using Border Style with Multiple Parameters
We will be creating a CSS file first. We will define border-style with a different set of parameters in different classes, such that we are able to see distinct results for each. Firstly, we will style the heading element where the border-style will have just one parameter:
h2{
color: blueviolet;
border-style: dashed;
}
Now we will code three more classes such that they have two, three, four parameters for border-style respectively. The code can be somewhat similar to this piece of code:
CSS Code:
.cls1{
color: crimson;
font-style: italic;
border-style:groove double;
}
.cls2{
color: darkgreen;
font-size: 20px;
border-style: inset dotted double;
}
.cls3{
color: deeppink;
border-style: double ridge outset dashed;
}
We will join or combine the above two snippets of code to get the final CSS file and this completes the CSS part of the code. Moving on to the HTML part, similar to the above example, we will create a page, such that we are calling the external style sheet and making use of the elements and classes that we have written the styling for. Coding is as follows:
HTML Code:
<html>
<head>
<title>Testing border-style</title>
<link rel = "stylesheet" href = "border.css">
</head>
<body>
<h2>Testing border style with 1 parameters</h2>
<p class="cls1">Testing border style with 2 parameters</p>
<p class="cls2">Testing border style with 3 parameters</p>
<p class="cls3">Testing border style with 4 parameters</p>
</body>
</html>
Save this code and open the html file through a browser to see the results:
Output:
3. Creating a Table to Demonstrate Different Border Styles
In this example, we will code and see what results in different values of the border-style property results in. We will see this through a table. In the CSS code, we will style the table and then declare six different classes with a different border-style in each. The final CSS code will be similar to this:
CSS Code:
table{
color: rgb(184, 36, 230);
font-size: 30px;
}
.t1{
border-style: dotted;
}
.t2{
border-style: dashed;
}
.t3{
border-style: double;
}
.t4{
border-style: groove;
}
.t5{
border-style: solid;
}
.t6{
border-style: inset;
}
In the HTML code, we will firstly call for the external style sheet and then we will code for a table, such that each table data i.e. <td> element uses a different class from the style sheet. The code should look somewhat similar to this:
HTML Code:
<html>
<head>
<title>Testing border-style</title>
<link rel = "stylesheet" href = "table.css">
</head>
<body>
<table>
<tr>
<td class="t1">Dotted</td>
<td class="t2">Dashed</td>
<td class="t3">Double</td>
</tr>
<tr>
<td class="t4">Groove</td>
<td class="t5">Solid</td>
<td class="t6">Inset</td>
</tr>
</table>
</body>
</html>
Save this html file and access it through a browser to see the following or similar results:
Output:
That was all about the usage of border-style. However, it will be a good idea to practice using border-style with different cases of styling and experiment around with the code to see all the results.
Recommended Articles
This is a guide to CSS Border Style. Here we discuss the Introduction and Syntax for Border Style along with different examples and its code implementation. You may also look at the following articles to learn more –
