We have used the different properties of the border like width, color etc.

All the border properties are used in one time and in order: border-width, border-style and border-color.

Syntax of border:-

The border-style properties include dotted, solid, double and dashed.

Here is the explanation of some new properties of border.

1. If we want to set the image in the border:-

We can set the image in the border.

Here is the CSS for border-image:-

 #border1 {
  border: 15px solid transparent;
  padding: 10px;
  border-image-source: url("http://www.w3resource.com/includes/img/border1.png");
  border-image-repeat: round;
  border-image-slice: 30;
  border-image-width: 20px;
}

2. If we want different different color in each edge:-

Here is the CSS for that:-

#border2 { 
  border-style: solid;
    border-color: #ff0000 #0000ff #ff0080 #00ffff;
    padding: 20px 10px;
  }

3. If we want the rounded corners:-

CSS for rounded corners is:-

#border3 {
    border: 3px solid #FF0000;
    padding: 10px 20px; 
    background: #00CCCC;
    border-top-right-radius: 3em;
}

We can check the below link for example of three properties of border-

https://jsfiddle.net/kaqer8da/