top of page
Search

A Brief Introduction About CSS Border Style

CSS border is used to set the border on Elements like Image, Paragraph etc.


CSS border properties are used to specify the style, color and size of the border.


Border-Properties


Here we have some properties of border :

  1. Border-style

  2. Border-color

  3. Border-width

  4. Border-radius


Below is the example for different properties of border:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
 
}

p.two {
   border-width: 5px;
    border-style: Solid;
 
 
}

p.three {
  border-radius: 10px;
   border-style: solid;
 

}

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

</style>
</head>
<body>

<h2>The border Properties</h2>
<p>These properties specifies styling of the border:</p>

<p class="one">Border Style</p>
<p class="two">Border width</p>
<p class="three">Border Radius</p>
<p class="four">Border Color</p>



</body>
</html>

Output:



Border-Style


Following are the different types of border in CSS :

  • dotted - Defines a dotted border

  • dashed - Defines a dashed border

  • solid - Defines a solid border

  • double - Defines a double border

  • groove - Defines a 3D grooved border. The effect depends on the border-color value

  • ridge - Defines a 3D ridged border. The effect depends on the border-color value

  • inset - Defines a 3D inset border. The effect depends on the border-color value

  • outset - Defines a 3D outset border. The effect depends on the border-color value

  • none - Defines no border

  • hidden - Defines a hidden border


Below is the Example with different styles of border:

<!DOCTYPE html>
<html>
<head>
<style>
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</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="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Output:



Border -Sides


These Border-slide Property is used when we want to display the border at the specific area(Top, Left, Right, Bottom).


Below are 4 properties in Border-slide:

  1. Border-top

  2. Border-right

  3. Border-left

  4. Border-bottom


Below is the example with border-side property:

<!DOCTYPE html>
<html>
<head>
<style>
p.zero{
  border-top-style: dashed;
}

p.one
{
  border-right-style: double;
}

p.two
{ 
  border-bottom-style: solid;
}

p.three
{
  border-left-style: dotted;
}

</style>
</head>
<body>

<h2> Border Sides</h2>
<p class="zero">Border at the Top.</p>
<p class ="one">Border at Right Side.</p>
<p class="two">Border at the Bottom .</p>
<p class="three">Border at Left Side.</p>

</body>
</html>

Output:





The Tech Platform

Comments

bottom of page