CSS Border Property

  • The border property is a shorthand property.
  • Using this border property we insert the border width, border style, and border color.

CSS Syntax→ border: border-width border-style border-color;

CSS border-width Property

  • Using border-width property set the width of the border. Default value is “medium”.

Note:- Always declare the border-style property before the border-width property. An element must have borders before you can set the width.
CSS Syntax→ border-width: medium|thin|thick|length;

  • The medium set a medium border. This is default.
  • The thin Set thin border.
  • The thick Set a thick border.
  • The length Allows you to define the thickness of the border.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Border 5px.</p>
<p class="two">Border Medium.</p>
<p class="three">Border 1px.</p>
</body>
</html>

CSS border-style Property

  • Using border-style property set the style of the border. Default value is “none”.

CSS Syntax→ border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

  • none Default value. Specifies no border.
  • hidden The same as “none”, except in border conflict resolution for table elements.
  • dotted this is used to set a dotted border.
  • dashed this is used to set a dashed border.
  • solid this is used to set solid border.
  • double this is used to set double border.
  • groove this is used to set a 3D grooved border. The effect depends on the border-color Value.
  • ridge this is used to set 3D ridged border. The effect depends on the border-color value.
  • inset this is used to set 3D inset border. The effect depends on the border-color value.
  • outset this is used to set a 3D outset border. The effect depends on the border-color value.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
</body>
</html>

CSS border-color Property

  • Using border-color property set the color of the border. Default value is the color of the text.

CSS Syntax→ border-color: color|transparent;

  • color set the background color.
  • list of possible color values. Default color is black.
  • transparent set that the border color should be transparent.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<p class="one">Red border</p>
<p class="two">Green border</p>
</body>
</html>
English Hindi