×
☰ Borders In HTML CSS And JavaScript 100+

WcCoder

Borders In HTML CSS And JavaScript

Here many types of borders are created in HTML CSS JavaScript.

You can use all these borders anywhere.

Auto fit borders are also present here.

The border-style property specifies the type of border that will be displayed. Valid options for the the border-style are none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit. Most of the styles alter the border appearance, but none and inherit are special. Setting the border-style to none disables borders, and inherit uses the border-style inherited from a less-specific selector.

The border-width property specifies how wide the border around a box should be. Borders are usually specified in pixels, but any CSS unit of measurement can be used. To create a 1-pixel, dashed border around all the anchors On a page, you use the following CSS:
a { border-width: 1px; border-style: solid;}

You can also use them to give a better look to text and paragraphs in your website.

WcCoder.com also runs new border projects built from HTML CSS JavaScript.

Input Output
HTML 9
<div class="mab91" style="">
   <div class="mab911">
      <div class="ab91"></div>
      <div class="ab92"></div>
      <div class="ab93"></div>
      <div class="ab94"></div>
      <div class="ab95"></div>
      <div class="ab96"></div>
      <div class="ab97"></div>
      <div class="ab98"></div>
      <div class="ab99"></div>
      <div class="ab910"></div>
   </div>
   <div class="mab912">
      <div class="ab91"></div>
      <div class="ab92"></div>
      <div class="ab93"></div>
      <div class="ab94"></div>
      <div class="ab95"></div>
      <div class="ab96"></div>
      <div class="ab97"></div>
      <div class="ab98"></div>
      <div class="ab99"></div>
      <div class="ab910"></div>
   </div>
   <div class="mab913">
      <div class="ab91"></div>
      <div class="ab92"></div>
      <div class="ab93"></div>
      <div class="ab94"></div>
      <div class="ab95"></div>
      <div class="ab96"></div>
      <div class="ab97"></div>
      <div class="ab98"></div>
      <div class="ab99"></div>
      <div class="ab910"></div>
   </div>
      <div class="mab914">
      <div class="ab91"></div>
      <div class="ab92"></div>
      <div class="ab93"></div>
      <div class="ab94"></div>
      <div class="ab95"></div>
      <div class="ab96"></div>
      <div class="ab97"></div>
      <div class="ab98"></div>
      <div class="ab99"></div>
      <div class="ab910"></div>
   </div>
</div>
CSS 9

  *{
   margin: 0px;
   padding: 0px;
  }
  .mab91{
      position:relative;
      height: 400px;
      width: 340px;
      border: 3px pink solid
  }
  .ab91{
       position: absolute;
       border: 3px white solid;
       border-top: none;
       border-left: none;
       height: 50px;
       width: 50px;
       border-bottom-right-radius: 50px;
       margin: 10px 0px 0px 10px;
  }
  .ab92{
      height:70px;
      width: 0px;
      border: 3px white solid;
      border-top: 0px;
      border-left: 0px;
      border-bottom: 0px;
      margin: 60px 0px 0px 9px;
      position: absolute;
  }
  .ab93{
      height:0px;
      width: 70px;
      border: 3px white solid;
      border-right: 0px;
      border-left: 0px;
      border-bottom: 0px;
      margin: 9px 0px 0px 60px;position: absolute;
  }
  .ab94{
   height:75px;
   width: 0px;
   border: 3px white solid;
   border-top: 0px;
   border-left: 0px;
   border-bottom: 0px;
   margin: 40px 0px 0px 17px;position: absolute;
  }
  .ab95{
   height:0px;
   width: 75px;
   border: 3px white solid;
   border-right: 0px;
   border-left: 0px;
   border-bottom: 0px;
   margin: 17px 0px 0px 40px;position: absolute
  }
  .ab96{
   height:6px;
   width: 5px;
   border: 3px white solid;
   border-bottom: none;
   margin: 33px 0px 0px 17px;
   position: absolute
  }
  .ab97{
   height:5px;width: 5px;
   border: 3px white solid;
   margin: 33px 0px 0px 24.5px;
   position: absolute
  }
  .ab98{
   height:5px;
   width: 5px;
   border: 3px white solid;
   margin: 25px 0px 0px 24.5px;
   position: absolute
  }
  .ab99{
   height:5px;
   width: 5px;
   border: 3px white solid;
   margin: 25px 0px 0px 32px;
   position: absolute
  }
  .ab910{
   height:5px;
   width: 6px;
   border: 3px white solid;
   margin: 17px 0px 0px 32px;
   position: absolute;
   border-right: none
  }
  .mab912{
   height: 150px;
   width: 150px;
   position:absolute;
   right: 0;
   transform: rotate(90deg);
  }
  .mab913{
   height: 150px;
   width: 150px;
   position:absolute;
   bottom: 0;
   right: 0;
   transform: rotate(180deg);
  }
  .mab914{
   height: 150px;
   width: 150px;
   position:absolute;
   bottom: 0;
   left: 0;
   transform: rotate(270deg);
  }