How to make Border in CSS
By  ShC    4 - 09 January, 23
How to make border in CSS

Share article on social media


In this article, I will tell you how to make border in CSS. To make a border in CSS, you will use the border property. This property can be used to specify the style, width, and color of a border.

Here is an example of how to make border in css that is 2 pixels wide, solid and red color:

div {
 border: 2px solid red;
}

You can also specify each aspect of the border individually using the following properties:

  • border-style : This specifies the style of the border (e.g. solid, dashed, etc.).

  • border-width : This specifies the width of the border in pixels.

  • border-color : This specifies the color of the border.

Learn How to write text over Image in HTML .

Here is an example of how to use these individual properties to make a dotted, green border that is 5 pixels wide:

div{
  border-style: dotted;
  border-width: 5px;
  border-color: green;
}

You can also specify different borders for each side of an element using the following properties:

  • border-top : This specifies the border for the top side of an element.

  • border-right : This specifies the border for the right side of an element.

  • border-bottom : This specifies the border for the bottom side of an element.

  • border-left : This specifies the border for the left side of an element.

Here is an example of how to use these properties to make a solid, blue border on the top and bottom sides of an element, and a dashed, yellow border on the right and left sides:

div {
  border-top: solid blue;
  border-right: dashed yellow;
  border-bottom: solid blue;
  border-left: dashed yellow;
}

You can also use the border-radius property to make rounded corners on your border. This property takes a value in pixels and applies the rounding to all corners of the element.

div {
  border: 2px solid red;
  border-radius: 10px;
}

That's it! With these properties, you should be able to make border in css you need for your web page.