Skip to main content

CSS-Borders

CSS border properties allow us to set the style, color, and width of the border. 

NOTE

Different properties can be set for each border, including the top, right, bottom, and left borders.

CSS Border Style​

The border-style CSS property specifies the line style for all four sides of an element's border. syntax:

border-style: value;

CSS Border width​

By using this property the width of the borders can be set. Width can be set by using three Predefined values: thin,medium,or thick.

Demo​

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

CSS Border Color​

The border-color property is used to add colour to an element's border. The border-color property will only work if the border-style property, which is used to set the borders, is defined first. This property will not function on its own. This can take one to four values for the top, right, bottom, and left borders, respectively. If this property is not set, the element's colour is used.

Default Value : The current color of the element

Property values: Where color-value can be any of the following:

name: It specifies a color name, like “blue”. Hex: It specifies a hex value, like “#0000ff”. RGB: It specifies a RGB value, like “rgb(0, 0, 255)”. transparent: It sets the border color of the corresponding element to transparent.

Demo​

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

CSS Rounded borders​

The border-radius CSS property is used to add a rounded border to an HTML element. It is used to round an element's corner. The property specifies the element's border-radius.

Demo​

p {
  border: 2px solid red;
  border-radius: 5px;
}