Border Use

Karan Manohar Gharale

— 3 min read
Border Use
Photo by Barbara Zandoval / Unsplash

n CSS (Cascading Style Sheets), you can control the style of borders around HTML elements using the border-style property. The border-style property allows you to specify the style of each side of an element's border. You can apply different border styles to the top, right, bottom, and left sides of an elements 

Here are some commonly used border style : 

  • None (border-style: none;): This style removes all borders from the element.
  • Solid (border-style: solid;): This style creates a solid, continuous line as the border.
  • Dashed (border-style: dashed;): This style creates a dashed line as the border.
  • Dotted (border-style: dotted;): This style creates a dotted line as the border.
  • Double (border-style: double;): This style creates a double line as the border.
  • Groove (border-style: groove;): This style creates a 3D, grooved border.
  • Ridge (border-style: ridge;): This style creates a 3D, ridged border.
  • Inset (border-style: inset;): This style creates a 3D, inset border.
  • Outset (border-style: outset;): This style creates a 3D, outset border.
  • Hidden (border-style: hidden;): This style is similar to "none," but it may still affect the layout and spacing of the element.

Below is the example on how you can use it in the your program :

<!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>

With border you can specify the types or the styles of the border eg : border width, Border colour, different border on each side of the element, Border Rounded 

Examples : 

  1. CSS Border Width :  You can specify the width of the border,
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;
}

  1. Specific Side Widths : You can specify the width of the each side of the border,
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

  1. CSS Border Color : The border-color property is used to set the color of the four borders.
p.one {
  border-style: solid;
  border-color: red;
}

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

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

  1. CSS Border - Individual Sides : properties for specifying each of the borders (top, right, bottom, and left),
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

  1. CSS Shorthand Border Property : It Allows us to specify all the individual border properties in one property.
p {
  border: 5px solid red;
}

  1. CSS Rounded Borders : This Property adds the border rounded borders,
p {
  border: 2px solid red;
  border-radius: 5px;
}

Read more