Border Properties In CSS

By / February 1, 2022

Watch video presentation for better understanding and subscribe for more;

Watch now!
In this tutorial we discuss three major parts, which include; border-color, border-width and border-style. We will discuss the properties of each giving out the relevant examples as follows;

1. Border-color


This is the first part of our tutorial today, it is used to specify the color of the border. You may alter the color of the border in the right, left, top and even bottom. We will have an example in four cases to show how these properties applied as follows; 
<head>
<style>
p.example{
border: 2px solid;
border-right-color: red;
border-left-color: green;
border-bottom-color: brown;
border-top-color: yellow;
}
</style>
</head>
<body>
<p class="example">
The text will be surrounded by different color as indicated in the style tags
</p>
</body>

*You may try it yourself using different colors

It will produce this;

The text will be surrounded by different color as indicated in the style tags

2. Border width

In this part we will discuss the properties of border width, where you can set in the left, right, bottom or even top. Width is given in either pc, pt or cm. Width can be indicated by thin, thick or medium. Therefore, you can set the border-width as shown in the following example;

<head>
<style>
p.example{
border-style: solid;
border-right-width: 4px;
border-left-width: medium;
border-bottom-width: 2px;
border-top-width: 1pt;
}
</style>
</head>
<body>
<p class="example">
The text is surrounded by solid border of different width 
</p>
</body>

*You may try it yourself using different width lengths

It will produce this;

The text is surrounded by solid border of different width

3. Border-style

This is our last part, we will discuss various properties of border-style. As we have discussed in other parts above you can set the properties in the right, left, top and bottom. Some of this properties include;

  • dotted -It consists of series of dots
  • None/hidden -It shows no border
  • double -it indicates two solid lines
  • solid – it indicates one solid line
  • groove -it looks like is curved into the page
  • dashed -it shows series of short lines
  • ridge -It is the opposite of groove
  • inset – it makes the box to look like it is embedded in the page

We may have an example to illustrate all this as follows;

<head>
<style>
p.example{
border-width: 2px;
border-right-style: dashed;
border-left-style: groove;
border-top-style: dotted;
border-bottom-style: solid;
}
</style>
</head>
<body>
<p class="example">
The text will be surrounded by the border of different styles as indicated in the style tags
</p>
</body>

*You may try it using other types of style properties and see it how it appears

It will produce this;

The text will be surrounded by the border of different styles as indicated in the style tags

NB. Remember you combine all of them as follows;

<p style="border: 2px double green;">
This text will have a border of 2 pixels doubled and of green color
</p>

It will produce this;

This text will have a border of 2 pixels doubled and of green color

Thanks for reading through our tutorial. As we continue learning CSS we are hoping to meet you in our next tutorial.