/    /  CSS Border

CSS Border

 

The CSS border property is a shorthand property used to set the border on an element.

The CSS border properties are used to specify the style, color, and size of the border of an element. The CSS border properties are given below.

  • border-style
  • border-color
  • border-width

 

CSS border-style:

 

This property is used to specify the border type which you want to display on the web page.

There are some border-style values that are used with border-style property to define a border.

 

none – It doesn’t define any border.

dotted – Define a dotted border.

dashed – Define a dashed border.

solid – Define a solid border.

double – Defines two borders

groove – Defines a 3d grooved border.

ridge – It defines a 3d ridged border.

inset – It defines a 3d inset border.

outset – It defines a 3d outset border.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
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;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No 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>
<p class="hidden">A hidden border.</p>
</body>
</html>

 

OUTPUT:

 

CSS Border

 

CSS border-width:

 

The property is used to set the border’s width. It is set in pixels. You can also use one of the three pre-defined values, thin, medium, or thick to set the width 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">Write your content here.</p>
<p class="two">Write your content here.</p>
<p class="three">Write your content here.</p>
</body>
</html>

 

OUTPUT:

 

CSS Border

 

CSS border-color:

 

There are three different methods to set the color of the border.

  • Name: It specifies the color name(color:red).
  • RGB: It specifies the RGB value of the color(color:rgb(255,0,0)).
  • Hex: It specifies the hex value of the color(color:#ff0000).

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>

 

OUTPUT:

 

CSS Border