×
☰ 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 30
<div class="ab_30">          
   <div class="ab30_1">
      <div class="ab301" id="as30"></div>
      <div class="ab302" id="as30"></div>
      <div class="ab303" id="as30"></div>
      <div class="ab304" id="as30"></div>
      <div class="ab305" id="as30"></div>
      <div class="ab306" id="as30"></div>
      <div class="ab307" id="as30"></div>
      <div class="ab308" id="as30"></div>
      <div class="ab309" id="as30"></div>
   </div>     
</div>
CSS 30

   .ab_30{
      height: 350px;
      width: 250px;
      background:yellow;
      padding: 35px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as30{
      position: absolute;
   }
   .ab30_1{
      position: absolute;     /* Main div */
      height: 70px;
      width: 300px;
      left: 10px;
      /*border: 2px darkred solid;*/
   }
   .ab301{
      height: 14px;
      width: 14px;
      border-radius: 14px;
      top: 28px;
      left: 0px;
      background: darkred;
   }
   .ab302{
      height: 14px;
      width: 14px;
      border-radius: 14px;
      top: 28px;
      right: 0px;
      background: darkred;
   }
   .ab303{
      width: 100px;
      top: 33px;
      left: 8px;
      border-bottom: 4px darkred solid;
   }
   .ab304{
      width: 100px;
      top: 33px;
      right: 10px;
      border-bottom: 4px darkred solid;
   }
   .ab305{
      height: 30px;
      width: 30px;
      top: 16px;
      left: 110px;
      transform: rotate(45deg);
      border: 4px darkred solid;
   }
   .ab306{
      height: 30px;
      width: 30px;
      top: 16px;
      left: 130px;
      transform: rotate(45deg);
      border: 4px darkred solid;
   }
   .ab307{
      height: 30px;
      width: 30px;
      top: 16px;
      left: 150px;
      transform: rotate(45deg);
      border: 4px darkred solid;
   }
HTML 31
<div class="ab_31">          
   <div class="ab31_1">
      <div class="ab311" id="as31"></div>
      <div class="ab312" id="as31"></div>
      <div class="ab313" id="as31"></div>
      <div class="ab314" id="as31"></div>
      <div class="ab315" id="as31"></div>
      <div class="ab316" id="as31"></div>
      <div class="ab317" id="as31"></div>
      <div class="ab318" id="as31"></div>
   </div>     
</div>
CSS 31

   .ab_31{
      height: 350px;
      width: 250px;
      background:yellow;
      padding: 35px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as31{
      position: absolute;
   }
   .ab31_1{
      position: absolute;     /* Main div */
      height: 70px;
      width: 300px;
      left: 10px;
      /*border: 2px darkred solid;*/
   }
   .ab311{
      width: 125px;
      top: 33px;
      left: -5px;
      border-bottom: 4px darkred solid;
   }
   .ab312{
      width: 125px;
      top: 33px;
      right: -5px;
      border-bottom: 4px darkred solid;
   }
   .ab313{
      height: 40px;
      width: 40px;
      top: 11px;
      left: 125px;
      transform: rotate(45deg);
      border: 4px darkred solid;
   }
   .ab314{
      height: 20px;
      width: 20px;
      top: 21.5px;
      left: 135px;
      transform: rotate(45deg);
      border: 4px darkred solid;
   }
   .ab315{
      height: 20px;
      width: 80px;
      top: 21px;
      left: 50px;
      border-top: 4px darkred solid;
      border-bottom: 4px darkred solid;
   }
   .ab316{
      height: 15.5px;
      width: 15.5px;
      top: 25.15px;
      left: 40.3px;
      transform: rotate(-45deg);
      border-top: 4px darkred solid;
      border-left: 4px darkred solid;
   }
   .ab317{
      height: 20px;
      width: 80px;
      top: 21px;
      right: 50px;
      border-top: 4px darkred solid;
      border-bottom: 4px darkred solid;
   }
   .ab318{
      height: 15.5px;
      width: 15.5px;
      top: 25.15px;
      right: 40.3px;
      transform: rotate(45deg);
      border-top: 4px darkred solid;
      border-right: 4px darkred solid;
   }
HTML 32
<div class="ab_32">          
   <div class="ab32_1">
      <div class="ab321" id="as32"></div>
      <div class="ab322" id="as32"></div>
      <div class="ab323" id="as32"></div>
      <div class="ab324" id="as32"></div>
      <div class="ab325" id="as32"></div>
      <div class="ab326" id="as32"></div>
      <div class="ab327" id="as32"></div>
      <div class="ab328" id="as32"></div>
      <div class="ab329" id="as32"></div>
      <div class="ab3210" id="as32"></div>
      <div class="ab3211" id="as32"></div>
      <div class="ab3212" id="as32"></div>
      <div class="ab3213" id="as32"></div>
      <div class="ab3214" id="as32"></div>
      <div class="ab3215" id="as32"></div>
      <div class="ab3216" id="as32"></div>
   </div>     
</div>
CSS 32

   .ab_32{
      height: 350px;
      width: 290px;
      background:yellow;
      padding: 35px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as32{
      position: absolute;
   }
   .ab32_1{
      position: absolute;     /* Main div */
      height: 70px;
      width: 350px;
      left: 4px;
      border: 2px darkred solid;
   }
   .ab321{
      width: 140px;
      top: 33px;
      left: 10px;
      border-bottom: 3px darkred solid;
   }
   .ab322{
      width: 140px;
      top: 33px;
      right: 10px;
      border-bottom: 3px darkred solid;
   }
   .ab323{
      height: 25px;
      width: 25px;
      top: 19px;
      left: 160px;
      transform: rotate(45deg);
      border: 3px darkred solid;
   }
   .ab324{
      height: 7px;
      width: 7px;
      top: 28.5px;
      left: 169px;
      transform: rotate(45deg);
      border: 3px darkred solid;
   }
   .ab325{
      height: 10px;
      width: 105.5px;
      top: 26.5px;
      left: 50px;
      border-top: 3px darkred solid;
      border-bottom: 3px darkred solid;
   }
   .ab326{
      height: 8px;
      width: 8px;
      top: 29px;
      left: 44px;
      transform: rotate(-45deg);
      border-top: 3px darkred solid;
      border-left: 3px darkred solid;
   }
   .ab327{
      height: 10px;
      width: 105.5px;
      top: 26.5px;
      right: 50px;
      border-top: 3px darkred solid;
      border-bottom: 3px darkred solid;
   }
   .ab328{
      height: 8px;
      width: 8px;
      top: 29px;
      right: 44px;
      transform: rotate(45deg);
      border-top: 3px darkred solid;
      border-right: 3px darkred solid;
   }
   .ab329{
      height: 8px;
      width: 8px;
      top: 29px;
      left: 148px;
      transform: rotate(-45deg);
      border-top: 3px darkred solid;
      border-left: 3px darkred solid;
   }
   .ab3210{
      height: 8px;
      width: 8px;
      top: 29px;
      right: 148px;
      transform: rotate(45deg);
      border-top: 3px darkred solid;
      border-right: 3px darkred solid;
   }
   .ab3211{
      height: 6px;
      width: 6px;
      top: 28.5px;
      left: 0px;
      transform: rotate(45deg);
      border: 3px darkred solid;
   }
   .ab3212{
      height: 6px;
      width: 6px;
      top: 28.5px;
      right: 0px;
      transform: rotate(45deg);
      border: 3px darkred solid;
   }
   .ab3213{
      height: 15px;
      top: 15px;
      left: 174px;
      border-left: 3px darkred solid;
   }
   .ab3214{
      height: 15px;
      top: 40px;
      left: 174px;
      border-left: 3px darkred solid;
   }
   .ab3215{
      width: 15px;
      top: 33px;
      left: 155px;
      border-top: 3px darkred solid;
   }
   .ab3216{
      width: 15px;
      top: 33px;
      right: 155px;
      border-top: 3px darkred solid;
   }