×
☰ 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 33
<div class="ab_33">          
   <div class="ab33_1">
      <div class="ab331" id="as33"></div>
      <div class="ab332" id="as33"></div>
      <div class="ab333" id="as33"></div>
      <div class="ab334" id="as33"></div>
      <div class="ab335" id="as33"></div>
      <div class="ab336" id="as33"></div>
      <div class="ab337" id="as33">
         <h1>Heding</h1>
         <p>Nothing to see here...</p>
      </div>
   </div>     
</div>
CSS 33
   .ab_33{
      height: 350px;
      width: 290px;
      background:yellow;
      padding: 35px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as33{
      position: absolute;
   }
   .ab33_1{
      position: absolute;     /* Main div */
      height: 210px;
      width: 350px;
      left: 4px;
      border: 2px darkred solid;
   }
   .ab331{
      height: 195px;
      width: 335px;
      top: 5px;
      left: 5px;
      border: 3px black dashed;
   }
   .ab332{
      height: 50px;
      width: 50px;
      top: 5px;
      left: 5px;
      border-top: 3px black solid;
      border-left: 3px black solid;
   }
   .ab333{
      height: 50px;
      width: 50px;
      top: 5px;
      right: 5px;
      border-top: 3px black solid;
      border-right: 3px black solid;
   }
   .ab334{
      height: 50px;
      width: 50px;
      bottom: 5px;
      left: 5px;
      border-bottom: 3px black solid;
      border-left: 3px black solid;
   }
   .ab335{
      height: 50px;
      width: 50px;
      bottom: 5px;
      right: 5px;
      border-bottom: 3px black solid;
      border-right: 3px black solid;
   }
   .ab336{
      height: 195px;
      width: 70px;
      top: 5px;
      left: 140.5px;
      border-top: 3px black solid;
      border-bottom: 3px black solid;
   }
   .ab337{
      height: 160px;
      width: 300px;
      top: 12.5px;
      left: 12.5px;
      padding: 10px;
      border: 2px darkred solid;
   }

Heding

Nothing to see here...
HTML 34
<div class="ab_34">          
   <div class="ab34_1">
      <div class="ab341" id="as34"></div>
      <div class="ab342" id="as34"></div>
      <div class="ab343" id="as34"></div>
      <div class="ab344" id="as34"></div>
      <div class="ab345" id="as34"></div>
      <div class="ab346" id="as34"></div>
      <div class="ab347" id="as34"></div>
      <div class="ab348" id="as34"></div>
      <div class="ab349" id="as34"></div>
      <div class="ab3410" id="as34"></div>
      <div class="ab3411" id="as34"></div>
      <div class="ab3412" id="as34"></div>
      <div class="ab3413" id="as34"></div>
      <div class="ab3414" id="as34"></div>
      <div class="ab3415" id="as34"></div>
      <div class="ab3416" id="as34"></div>
      <div class="ab3417" id="as34"></div>
      <div class="ab3418">
         <h1>Heding</h1>
         <p>Nothing to see here...</p>
      </div>
   </div>     
</div>
CSS 34
   .ab_34{
      height: 350px;
      width: 290px;
      background:yellow;
      padding: 40px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as34{
      border: 3.5px black solid;
      position: absolute;
   }
   .ab34_1{
      border: 3.5px black solid;    /*  Main div   */
      position: absolute;     
      height: 250px;
      width: 355px;
      left: 5px;     
   }
   .ab341{
      height: 227px;
      width: 333px;
      top: 8px;
      left: 8px;
   }
   .ab342{
      height: 15px;
      width: 15px;
      top: -3.5px;
      left: -3.5px;
   }
   .ab343{
      height: 8px;
      width: 8px;
      top: 15px;
      left: 15px;
   }
   .ab344{
      height: 8px;
      width: 8px;
      top: 15px;
      left: -3.5px;
   }
   .ab345{
      height: 8px;
      width: 8px;
      top: -3.5px;
      left: 15px;
   }
   .ab346{
      height: 15px;
      width: 15px;
      top: -3.5px;
      right: -3.5px;
   }
   .ab347{
      height: 8px;
      width: 8px;
      top: 15px;
      right: 15px;
   }
   .ab348{
      height: 8px;
      width: 8px;
      top: 15px;
      right: -3.5px;
   }
   .ab349{
      height: 8px;
      width: 8px;
      top: -3.5px;
      right: 15px;
   }
   .ab3410{
      height: 15px;
      width: 15px;
      bottom: -3.5px;
      right: -3.5px;
   }
   .ab3411{
      height: 8px;
      width: 8px;
      bottom: 15px;
      right: 15px;
   }
   .ab3412{
      height: 8px;
      width: 8px;
      bottom: 15px;
      right: -3.5px;
   }
   .ab3413{
      height: 8px;
      width: 8px;
      bottom: -3.5px;
      right: 15px;
   }
   .ab3414{
      height: 15px;
      width: 15px;
      bottom: -3.5px;
      left: -3.5px;
   }
   .ab3415{
      height: 8px;
      width: 8px;
      bottom: 15px;
      left: 15px;
   }
   .ab3416{
      height: 8px;
      width: 8px;
      bottom: 15px;
      left: -3.5px;
   }
   .ab3417{
      height: 8px;
      width: 8px;
      bottom: -3.5px;
      left: 15px;
   }
   .ab3418{
      position: absolute;
      height: 207px;
      width: 313px;
      top: 30px;
      left: 30px;
   }

Heding

Nothing to see here...
HTML 35
<div class="ab_35">          
   <div class="ab35_1">
      <div class="ab351" id="as35"></div>
      <div class="ab352" id="as35"></div>
      <div class="ab353" id="as35"></div>
      <div class="ab354" id="as35"></div>
      <div class="ab355" id="as35"></div>
      <div class="ab356" id="as35">
         <p>Nothing to see here...</p>
      </div>
   </div>     
</div>
CSS 35
   .ab_35{
      height: 350px;
      width: 290px;
      background:yellow;
      padding: 40px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as35{
      position: absolute;
   }
   .ab35_1{
      border: 2px black solid;      /*  Main div   */
      position: absolute;     
      height: 250px;
      width: 358px;
      left: 5px;     
   }
   .ab351{
      border: 3.5px black solid;
      height: 225px;
      width: 301px;
      top: 9.5px;
      left: 25px;
   }
   .ab352{
      border-top: 3.5px black solid;
      border-right: 3.5px black solid;
      height: 202px;
      width: 302px;
      top: 19.5px;
      right: 35px;
   }
   .ab353{
      border-bottom: 3.5px black solid;
      border-left: 3.5px black solid;
      height: 202px;
      width: 302px;
      bottom: 19.5px;
      left: 35px;
   }
   .ab354{
      border-bottom: 3.5px black solid;
      border-left: 3.5px black solid;
      height: 100px;
      width: 100px;
      bottom: 30px;
      left: 45px;
   }     
   .ab355{
      border-top: 3.5px black solid;
      border-right: 3.5px black solid;
      height: 100px;
      width: 100px;
      top: 30px;
      right: 45px;
   }
   .ab356{
      height: 182px;
      width: 282px;
      padding: 10px;
      top: 30px;
      left: 45px;
   }

Nothing to see here...
HTML 36
<div class="ab_36">             
   <div class="ab36_1">
      <div class="ab361" id="as36"></div>
      <div class="ab362" id="as36"></div>
      <div class="ab363" id="as36"></div>
      <div class="ab364" id="as36"></div>
      <div class="ab365" id="as36"></div>
      <div class="ab366" id="as36"></div>
      <div class="ab367" id="as36"></div>
      <div class="ab368" id="as36"></div>
      <div class="ab369" id="as36"></div>
      <div class="ab3610" id="as36"></div>
      <div class="ab3611" id="as36"></div>
      <div class="ab3612" id="as36"></div>
      <div class="ab3613" id="as36">
         <h4>Nothing to see here...</h4>
      </div>
   </div>
</div>
CSS 36
   .ab_36{
      height: 350px;
      width: 280px;
      background:yellow;
      padding: 40px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as36{
      border-color: black;
      position: absolute;
   }
   .ab36_1{
            /*  Main div   */
      position: absolute;     
      height: 250px;
      width: 340px;
      left: 9px;     
   }
   .ab361{
      height: 15px;
      width: 15px;
      border: 5px solid;
      top: 0px;
      left: 0px;
   }
   .ab362{
      height: 15px;
      width: 15px;
      border: 5px solid;
      top: 0px;
      right: 0px;
   }
   .ab363{
      height: 15px;
      width: 15px;
      border: 5px solid;
      bottom: 0px;
      right: 0px;
   }
   .ab364{
      height: 15px;
      width: 15px;
      border: 5px solid;
      bottom: 0px;
      left: 0px;
   }
   .ab365{
      height: 15px;
      width: 15px;
      border: 5px solid;
      border-right: none;
      border-bottom: none;
      top: 20px;
      left: 20px;
   }
   .ab366{
      height: 15px;
      width: 15px;
      border: 5px solid;
      border-bottom: none;
      border-left: none;
      top: 20px;
      right: 19.7px;
   }
   .ab367{
      height: 15px;
      width: 15px;
      border: 5px solid;
      border-top: none;
      border-left: none;
      bottom: 20px;
      right: 19.7px;
   }
   .ab368{
      height: 15px;
      width: 15px;
      border: 5px solid;
      border-top: none;
      border-right: none;
      bottom: 20px;
      left: 20px;
   }
   .ab369{
      height: 15px;
      width: 261px;
      border: 5px solid;
      border-bottom: none;
      left: 35px;
   }
   .ab3610{
      height: 170px;
      width: 19.7px;
      border: 5px solid;
      border-left: none;
      top: 35px;
      right: 0px;
   }
   .ab3611{
      height: 15px;
      width: 261px;
      border: 5px solid;
      border-top: none;
      left: 35px;
      bottom: 0px;
   }
   .ab3612{
      height: 170px;
      width: 20px;
      border: 5px solid;
      border-right: none;
      top: 35px;
      left: 0px;
   } 
   .ab3613{
      height: 185px;
      width: 280px;
      top: 30px;
      left: 30px;
   }

Nothing to see here...
HTML 37
<div class="ab_37">             
   <div class="ab37_1">
      <div class="ab371" id="as37"></div>
      <div class="ab372" id="as37"></div>
      <div class="ab373" id="as37"></div>
      <div class="ab374" id="as37"></div>
      <div class="ab375" id="as37"></div>
      <div class="ab376" id="as37"></div>
      <div class="ab377" id="as37"></div>
      <div class="ab378" id="as37"></div>
   </div>
</div>
CSS 37
   .ab_37{
      height: 350px;
      width: 250px;
      background:yellow;
      padding: 40px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as37{
      border-color: black;
      position: absolute;
   }
   .ab371{
      height: 208px;
      width: 130px;
      border-top: 4px solid;
      border-left: 4px solid;
      top: 5px;
      left: 5px;
   }
   .ab372{
      height: 192px;
      width: 122px;
      border-top: 4px solid;
      border-left: 4px solid;
      top: 13px;
      left: 13px;
   }
   .ab373{
      width: 50px;
      border-bottom: 4px solid;
      top: 217px;
      left: 5px;
   }
   .ab374{
      width: 42px;
      border-bottom: 4px solid;
      top: 209px;
      left: 13px;
   }
   .ab375{
      height: 208px;
      width: 130px;
      border-bottom: 4px solid;
      border-right: 4px solid;
      top: 5px;
      right: 5px;
   }
   .ab376{
      height: 192px;
      width: 122px;
      border-bottom: 4px solid;
      border-right: 4px solid;
      top: 13px;
      right: 13px;
   }
   .ab377{
      width: 50px;
      border-top: 4px solid;
      top: 5px;
      right: 5px;
   }
   .ab378{
      width: 42px;
      border-top: 4px solid;
      top: 13px;
      right: 13px;
   }