You are currently viewing CSS Border Properties

CSS Border Properties

  • Post author:
  • Post category:CSS
  • Post comments:3 Comments

CSS Border Properties

You attempt to add borders to an element when you want it to appear clearer and more distinctive than others. A border is characterized as a line or a strip enclosing an element’s shape. You may control the border’s style, width, and color using the CSS border properties. As we will see later in this article, the CSS border property is utilized to give your items a boundary.

Let’s examine the many characteristics and borders that can be used to define an element’s border.

CSS Border Properties

Border-width

The width of your border will be determined by the property border width. You can use it to give your border a specific thickness. You can use any size unit you like, such as px, em, or rem. One, two, three, or four values can be used to specify the border-width attribute.

When a single value is specified, the width is applied evenly to all four sides.

//Syntax
border-width: value;

//Example 
div{
border-width: 4px;
}

In the case of two values, the first width applies to the top and bottom and the second to the left and right.

//Syntax
border-width: value1 value2;

//Example
div{
border-width: 4px 8px;
}

When three values are given, the top, left, and right are affected by the first width, while the bottom is affected by the second and third.

//Syntax
border-width: value1 value2 value3;

//Example
div{
border-width: 4px 8px 12px;
}

When four values are given, the top, right, bottom, and left, in that order, are affected by the widths (clockwise).

//Syntax
border-width: value1 value2 value3 value4;

//Example
div{
border-width: 4px 8px 12px 16px;
}

Examples output :

CSS Border Properties

Border-style

Your element’s border is set using the border-style attribute. It is the one of the main stage of adding your border. It accepts a range of values depending on your preferences for the style of your border.

//Syntax
border-style : style_value; //Apply four sides 

border-style : style_value01 style_value02; //First value for top and bottom and second value for left and right 

border-style : style_value01 style_value02 style_value03; //first value for top, the second for left and right, the third for bottom.

border-style : style_value01 style_value02 style_value03 style_value04; //top, right, bottom, and left(clockwise).

The values can be none, solid, dashed, dotted, double, groove, hidden, inset, none, outset, ridge etc.

Example :

CSS Border Properties

Border-color

Your border’s color can be set using the border-color property. You can enter the color here in any format, such as Hex (#2f2f2f), RGB (rgb(255,0,0)), etc. even the name of the color(green). This will determine the color of each of your border’s four sides.

One, two, three, or four values may be used to specify the border-color property. When a single value is entered, all four sides are coloured in the same way.

//syntax
border-color : value_1;

//Example
border-color : green;

The first color is applied to the top and bottom when two values are given, and the second color is applied to the left and right.

//syntax 
border-color : value_1 value_2;

//Example
border-color : red green;

The first color is applied to the top, the second to the left and right, and the third to the bottom when three values are applied.

//syntax
border-color : value_1 value_2 value_3;

//Example
border-color : red green blue;

The colours are applied to the top, right, bottom, and left in that sequence when four values are supplied (clockwise).

//syntax
border-color : value_1 value_2 value_3 value_4;

//Example
border-color : red green blue orange;

Examples output :

CSS Border Properties

Border-radius

You may have noticed that all of the borders in the previous image are rectangular. What if I like rounded vertices? Using the border-radius property, you may achieve that. You can use any unit for size, such as px, em, percentages, etc., here, just like with border-width.

//syntax
border-radius : value;

//Example
border-radius : 20px;

Border Properties Using Shorthand

Border-style property is a requirement for include border in your element; else, border will not show up. The border-width and border-color variables can be utilised as needed by developers. However, there is little value in specifying each of these 3 using a different property. It is possible to write all the property in one location quickly. You can use the shorthand border property and add all three of the above values.

//syntax
border : width_value style_value color_value;

//Example
border: 2px solid green;
CSS Border Properties

Conclusion

The CSS property border adds a border to a certain element. The border around your element is defined by the border-style attribute. Your border’s color will be determined by the border-color property. Your border’s width will be determined by the border-width property. Your border curve’s vertices are determined by the border-radius attribute. The syntax for the border shorthand property is border: “border-width” “border-style” “border-color”.I appreciate you taking the time to read this. I hope this blog has clarified all the ideas behind CSS Borders. Please leave a comment if you have any queries or issues.

Thankyou for reading!

Written by : Vipin

This Post Has 3 Comments

  1. Andrej

    Nice work!!!

Leave a Reply