CSS Border

In CSS, border is a property that allows you to add a border around an HTML element. The border property can be used to set the width, style, and color of the border.

Here's an example of how you can use the border property to add a 2-pixel wide, solid black border around a <div> element:

div {
    border: 2px solid black;
  }

In this example, we're setting the width of the border to 2px, the style to solid, and the color to black.

You can also use individual border-related properties to set the width, style, and color separately. For example:

 div {
    border-width: 2px;
    border-style: solid;
    border-color: black;
  }

This achieves the same result as the previous example, but sets each border property separately.

In addition to the border property, there are also individual border properties that can be used to set the width (border-width), style (border-style), and color (border-color) separately.

It's also worth noting that you can set different values for each side of the border using the border-top, border-right, border-bottom, and border-left properties. For example:

div {
    border-top: 1px solid black;
    border-right: 2px dashed red;
    border-bottom: 3px dotted green;
    border-left: 4px double blue;
  }

This sets a different border style for each side of the <div> element.

Border Type

You can use the border-style property in combination with other border-related properties, such as border-width and border-color, to create different border styles.

Border Radius

The border-radius property in CSS is used to set the radius of the corners of an HTML element's border, allowing you to create rounded corners for elements such as buttons, images, and divs.

Here's an example of how to use the border-radius property to create a button with rounded corners:

button  {
    border-radius: 10px;
  }

In this example, we're setting the border-radius property to 10px, which will create a button with rounded corners.

You can also specify up to four different values for the border-radius property to create different radii for each corner. The values are listed in a clockwise order, starting with the top-left corner.