Welcome to the CSS tutorials at SharpLesson, we already discussed CSS links, Box Model and CSS tables. Today we will see what is CSS borders, and how it will help you to present the data in a quality way. Unlike Html, CSS borders will let you to control the looks of border around the html elements.
Note: HTML has the limitation of not allowing border customization around the tags, the exception is table tag. Only borders around a table element can be customized as per the requirement in the HTML.
The CSS borders property will save you time, and it will allow you to set the color, style and size of the html element’s border as per your wish. Now let’s see what border properties we will cover in this tutorial.
- Border-width – It will let you set the width of the border.
- Border-color – Sets the color of the all sides of the border.
- Border-style – It will let to decide what kind of border you want for your element, like dotted, dashed, and double borders.
- Border– (any side) – If you do not wish to set the style for all sides of the borders, then you can style single side as well. For example, you can set style for left, right, top and bottom of the element’s border.
- Border – It will let you save code by setting all the properties in one declaration.
CSS borders – Properties
Now again, let’s see how we can use above said properties and its value with the practice of a simple example.
Border Width property
You can use the border-width property to change the thickness of the border. You can set the width of the border using thin, medium and thick. It is easy to remember terms, but you can use units as well. Like px, or pt.
Note: The best part is, you can set a different width for an element. For example, if you want, you can set thick for top border and thin for bottom border.
You can use below variants for CSS Borders width:
- Border-left-width – It will alter the width of the left border.
- Border-top-width – It will alter the width of the top border.
- Border-right-width – It will alter the width of the right border.
- Border-bottom-width – It will alter the width of the bottom border.
Example – Let’s understand it with a simple example:
In the below example, we have shown you a simple use of CSS borders width property. We have set the left and top border width to 15px, and We have set the right and bottom border width to 25px. We have just used the variation to show you the difference in the result.
<html> <head></head> <body> <h2 style="border-left-width:15px; border-top-width:15px; border-right-width: 25px; border-bottom-width:25px; border-style:double;"> SharpLesson is a best place to learn.</h2> </body> </html>
The output for the above code will be:
You can clearly figure out the difference. The left and top side is a bit thinner as compared to the right and bottom sides.
Border color property
The CSS borders color property will let you set the color for the border. You can give a different look to each side of the border by assigning colors to the left, top, right and bottom. The properties that you can use are:
- Border-left-color – It will let you change the color of the left side border.
- Border-top-color – It will let you change the color of the top side border.
- Border-right-color – It will let you change the color of the right side border.
- Border-bottom-color – It will let you change the color of the bottom side border.
Now let’s see the practical use of the above code.
Example
In the below example, we have shown the use of the CSS borders color properties. We have set the left and right border to blue. To show the difference we have set the color of the top border to green, and bottom border to red.
<html> <head> </head> <body> <h2 style="border-width:15px; border-left-color:blue; border-top-color:green; border-right-color: blue; border-bottom-color:red; border-style:double;"> SharpLesson is a best place to learn.</h2> </body> </html>
The output of the above code will be:
It is quite clear to us, that we can set individual border colors as per our liking.
Note: If you want all sides of the border with the same color, then you just need to use one property “border-color”. That’s it, it will shade the sides with the mentioned color.
Border Style Property
You can use the CSS borders style property to make your element border more stylish. There many options available to choose from.
- Solid
- Double
- Groove
- Ridge
- Dotted
- Dashed
- Outset
- Inset
Note: You can use none and hide as well, but it will show you no border.
Like other properties, you can use border style properties to highlight individual or all sides of the border.
- Border-left-style – You can alter the style of the left border.
- Border-top-style – You can alter the style of the top border.
- Border-right-style – You can alter the style of the right border.
- Border-bottom-style – You can alter the style of the bottom border.
Note: You can set style on the each side of the border using “border-style” property.
Now, let’s see how practically we can use it.
Example
In the below example, we have set the different properties for left, right, top and bottom sides of the border.
<html> <head> </head> <body> <h2 style="border-width:7px; border-left-style:solid; border-top-style:dotted; border-right-style:groove; border-bottom-style:double; border-color:red;"> SharpLesson is a best place to learn.</h2> </body> </html>
The output of the above code will be:
You can clearly see, that the left side is solid, top side is dotted, right side is grooved and the bottom side is doubled.
Border – Shorthand Property
We just saw how we can write different codes for style, width, and color, but do you know “ you can use a single property to declare all the values. To do so, we can use the shorthand property called Border. We can use the border property to specify the border-width, border-style and its color.
Example
In the below example, we have just set the border width to ‘5px’, border style to dashed and it’s color to the green. We have used three different properties in a single shorthand property. Let’s see the output.
<html > <head> </head> <body> <h2 style="border:5px dashed green;">SharpLesson is a best place to learn.</h2> </body> </html>
The output of the above code will be:
You can clearly see the result is as per our set value.
Conclusion
We have just discussed the CSS borders, its properties with examples. CSS is a beauty to learn, and SharpLesson will help you to get that beauty. Just practice it to get perfection.