×
☰ 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 8
<div onmouseenter="modify_m1h8()" id="mod_mab81" class="mab81" onmouseleave="unmodify_m1h8()">
   <div id="m1h8" class="m1h8">
      <div style="">
         <h1>Heding</h1>
      </div>
   </div>
   <div style="position: absolute;top: 120px;width: 230px;padding: 0px 10px;">
      Lorem ipsum dolor...
      </div>
         <div class="ab81" id="as8"></div>
         <div class="ab82" id="as8"></div>
         <div class="ab83" id="as8"></div>
         <div class="ab84" id="as8"></div>
         <div class="ab85" id="as8"></div>
         <div class="ab86" id="as8"></div>
         <div class="ab87" id="as8"></div>
         <div class="ab88" id="as8"></div>
         <div class="ab89" id="as8"></div>
      </div>
<div onmouseenter="modify_m1h8()" id="mod_mab81" onmouseleave="unmodify_m1h8()" class="mab82"> 
   <div class="ab81" id="as8"></div>
   <div class="ab82" id="as8"></div>
   <div class="ab83" id="as8"></div>
   <div class="ab84" id="as8"></div>
   <div class="ab85" id="as8"></div>
   <div class="ab86" id="as8"></div>
   <div class="ab87" id="as8"></div>
</div>
CSS 8

   
   .mab81{
            height: 450px;
            width: 250px;
            background:white;
            padding: 35px;
            color: black;
            position: relative;
            overflow: hidden;
            text-align: justify;
        }
        .mab82{
            height: 250px;
            width: 250px;
            background:none;
            padding: 35px;
            color: black;
            position: relative;
            overflow: hidden;
            text-align: justify;
            transform: rotate(180deg);
            margin-top: -320px;
        }
        #as8{
            position: absolute;
            border-color: rgb(200, 150, 10);

        }
        .ab81{
            height: 26px;
            width: 26px;
            top: 5px;
            left: 5px;
            border: 3.5px solid;
        }
        .ab82{
            height: 12px;
            width: 12px;
            left: 34px;
            top: 34px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab83{
            height: 10px;
            width: 10px;
            left: 43px;
            top: 42px;
            border: 3.5px solid;
        }
        .ab84{
            height: 200px;
            width: 26px;
            top: 46px;
            left: 5px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab85{
            height: 230px;
            width: 19px;
            top: 55px;
            left: 14.5px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab86{
            height: 26px;
            width: 200px;
            top: 5px;
            left: 46px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab87{
            height: 17px;
            width: 230px;
            top: 15px;
            left: 55px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .m1h8{
            padding: 5px 5px 0px 0px;
            border: 3px yellowgreen solid;
            text-align: center;
            height: auto;
            width: 150px;
            margin-left: 40px;
            border-bottom-right-radius: 40px;
            border-top-left-radius: 40px;
        }
        .m1h8>div{
            border: 3px yellowgreen solid;
            border-bottom-right-radius: 30px;
            border-top-left-radius: 30px;
            padding-bottom: 5px;
            background: white;
        }
JavaScript 8

  function modify_m1h8() { 
      document.getElementById('m1h8').style.background="yellowgreen";
  }
  function unmodify_m2h8() {
      document.getElementById('modb').style.background = "white";
  }
  function unmodify_m1h8() {
      document.getElementById('m1h8').style.background="white";
  }

Heding

Lorem ipsum dolor...
HTML 15
<div class="ab_15">
   <div class="par_15">
      <h1>Lorem ipsum</h1><br>
      Lorem ipsum dolor...
   </div>
   <div class="ab15_1">
      <div class="ab151" id="as15"></div>
      <div class="ab152" id="as15"></div>
      <div class="ab153" id="as15"></div>
      <div class="ab154" id="as15"></div>
      <div class="ab155" id="as15"></div>
      <div class="ab156" id="as15"></div>
      <div class="ab157" id="as15"></div>
   </div>
   <div class="ab15_2">
      <div class="ab151" id="as15"></div>
      <div class="ab152" id="as15"></div>
      <div class="ab153" id="as15"></div>
      <div class="ab154" id="as15"></div>
      <div class="ab155" id="as15"></div>
      <div class="ab156" id="as15"></div>
      <div class="ab157" id="as15"></div>
   </div>
</div>
CSS 15

  *{
   margin: 0px;
   padding: 0px;
  }
  .ab_15{
   height: 350px;
   width: 280px;
   background:yellow;
   padding: 30px;
   color: black;
   position: relative;
   overflow: hidden;
   text-align: justify;
  }
  #as15{
   border-color: red;
   position: absolute;
  }
  .ab151{
   height: 200px;
   width: 40px;
   border: 3.5px solid;
   border-right: none;
   border-bottom: none;
   top: 50px;
   left: 10px;
  }
  .ab152{
   height: 180px;
   width: 1px;
   border-left: 3.5px solid;
   top: 63px;
   left: 22px;
  }
  .ab153{
   height: 40px;
   width: 200px;
   border: 3.5px solid;
   border-right: none;
   border-bottom: none;
   left: 50px;
   top: 10px;
  }
  .ab154{
   height: 1px;
   width: 180px;
   border-bottom: 3.5px solid;
   left: 63px;
   top: 20px;
  }
  .ab155{
   height: 25px;
   width: 25px;
   border: 3.5px solid;
   left: 10px;
   top: 10px;        
  }
  .ab156{
   height: 28px;
   width: 20px;
   background: yellow;
   transform: rotate(55deg);
   left: 238px;
   top: 12px;        
  }
  .ab157{
   height: 28px;
   width: 20px;
   background: yellow;
   transform: rotate(55deg);
   left: 12px;
   top: 238px;
  }
  .ab15_2{
   position: absolute;
   transform: rotate(180deg);
   bottom: 0px;
   right: 0px;       
  }
  .par_15{
   position: absolute;
   height: 150px;
   width: 220px;
   margin: 15px 30px;
  }

Lorem ipsum


Lorem ipsum dolor...
HTML 19
<div class="ab_19">
   <div class="par19">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...
   </div>
   <div class="ab19_1">
      <div class="ab191" id="as19"></div>
      <div class="ab192" id="as19"></div>
      <div class="ab193" id="as19"></div>
      <div class="ab194" id="as19"></div>              
   </div>
   <div class="ab19_2">
      <div class="ab191" id="as19"></div>
      <div class="ab192" id="as19"></div>
      <div class="ab193" id="as19"></div>
      <div class="ab194" id="as19"></div>              
   </div>     
</div>
CSS 19

  *{
   margin: 0px;
   padding: 0px;
  }
  .ab_19{
   height: 350px;
   width: 250px;
   background:yellow;
   padding: 35px;
   color: black;
   position: relative;
   overflow: hidden;
   text-align: justify;
  }
  #as19{
   border-left: 4px red solid;
   border-radius: 3px;
   position: absolute;
  }
  .ab191{
   height: 200px;
   width: 200px;
   top: 30px;
   left: 10px;
  }
  .ab192{
   height: 200px;
   width: 200px;
   top: 40px;
   left: 20px;
  }
  .ab193{
   height: 200px;
   width: 200px;
   top: 10px;
   left: 30px;
   transform: rotate(90deg);
  }
  .ab194{
   height: 200px;
   width: 200px;
   top: 20px;
   left: 40px;
   transform: rotate(90deg);
  }
  .ab195{
   height: 146px;
   width: 146px;
   bottom: 13px;
   right: 13px;
   transform: rotate(180deg);
  }
  .ab196{
   height: 180px;
   width: 100px;
   bottom: 22px;
   right: 22px;
   transform: rotate(180deg);
  }
  .ab19_2{
   position: absolute;
   bottom: 0;
   right: 0;
   transform: rotate(180deg);
  }

Lorem ipsum


Lorem ipsum dolor...
HTML 20
<div class="ab_20">
   <div class="par_20">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...
   </div>
   <div class="ab20_1">
      <div class="ab201" id="as20"></div>
      <div class="ab202" id="as20"></div>
      <div class="ab203" id="as20"></div>
      <div class="ab204" id="as20"></div>
      <div class="ab205" id="as20"></div>
      <div class="ab206" id="as20"></div>
      <div class="ab207" id="as20"></div>
      <div class="ab208" id="as20"></div>
      <div class="ab209" id="as20"></div>
      <div class="ab2010" id="as20"></div>
   </div>
   <div class="ab20_2">
      <div class="ab201" id="as20"></div>
      <div class="ab202" id="as20"></div>
      <div class="ab203" id="as20"></div>
      <div class="ab204" id="as20"></div>
      <div class="ab205" id="as20"></div>
      <div class="ab206" id="as20"></div>
      <div class="ab207" id="as20"></div>
      <div class="ab208" id="as20"></div>
   </div>     
</div>
CSS 20

  *{
   margin: 0px;
   padding: 0px;
  }      
  .ab_20{
   height: 350px;
   width: 250px;
   background:yellow;
   padding: 35px;
   color: black;
   position: relative;
   overflow: hidden;
   text-align: justify;
  }
  #as20{
   border-color: black;
   border-radius: 3px;
   position: absolute;
  }
  .ab201{
   height: 24px;
   width: 190px;
   border-top: 4px solid;
   border-left: 4px solid;
   top: 10px;
   left: 60px;
  }
  .ab202{
   height: 24px;
   width: 180px;
   border-top: 4px solid;
   border-left: 4px solid;
   top: 20px;
   left: 70px;
  }
  .ab203{
   height: 20px;
   width: 20px;
   border: 4px solid;
   top: 10px;
   left: 10px;
  }
  .ab204{
   height: 20px;
   width: 20px;
   border: 4px solid;
   top: 20px;
   left: 20px;
  }
  .ab205{
   height: 24px;
   width: 24px;
   border-top: 4px solid;
   border-left: 4px solid;
   top: 34px;
   left: 34px;
  }
  .ab206{
   height: 24px;
   width: 24px;
   border-top: 4px solid;
   border-left: 4px solid;
   top: 44px;
   left: 44px;
  }
  .ab207{
   height: 190px;
   width: 24px;
   border-top: 4px solid;
   border-left: 4px solid;
   top: 60px;
   left: 10px;
  }
  .ab208{
   height: 180px;
   width: 24px;
   border-top: 4px solid;
   border-left: 4px solid;
   top: 70px;
   left: 20px;
  }
  .ab20_2{
   transform: rotate(180deg);
   position: absolute;
   bottom: 0;
   right: 0;
  }
  .par_20{
   position: absolute;
   height: 250px;
   width: 200px;
   margin: 20px;
  }

Lorem ipsum


Lorem ipsum dolor...
HTML 21
<div class="ab_21">
   <div class="par_21">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...
   </div>
   <div class="ab21_1">
      <div class="ab211" id="as21"></div>
      <div class="ab212" id="as21"></div>
      <div class="ab213" id="as21"></div>
      <div class="ab214" id="as21"></div>
      <div class="ab215" id="as21"></div>
   </div>
   <div class="ab21_2">
      <div class="ab211" id="as21"></div>
      <div class="ab212" id="as21"></div>
      <div class="ab213" id="as21"></div>
      <div class="ab214" id="as21"></div>
      <div class="ab215" id="as21"></div>
   </div>
</div>
CSS 21

  *{
   margin: 0px;
   padding: 0px;
  }      
  .ab_21{
   height: 350px;
   width: 250px;
   background:yellow;
   padding: 35px;
   color: black;
   position: relative;
   overflow: hidden;
   text-align: justify;
  }
  #as21{
   border-color: darkgoldenrod;
   position: absolute;
  }
  .ab211{
   height: 200px;
   width: 200px;
   border-top: 7px solid;
   border-left: 7px solid;
   top: 27px;
   left: 27px;
  }
  .ab212{
   height: 30px;
   width: 30px;
   border: 7px solid;
   top: 10px;
   left: 10px;
  }
  .ab213{
   height: 20px;
   width: 20px;
   border-top: 7px solid;
   border-left: 7px solid;
   top: 46px;
   left: 46px;
  }
  .ab214{
   height: 30px;
   width: 80px;
   border-top: 7px solid;
   border-left: 7px solid;
   top: 10px;
   left: 66px;
  }
  .ab215{
   height: 80px;
   width: 30px;
   border-top: 7px solid;
   border-left: 7px solid;
   top: 66px;
   left: 10px;
  }
  .ab21_2{
   transform: rotate(180deg);
   position: absolute;
   bottom: 0;
   right: 0;
  }
  .par_21{
   width: 200px;
   position: absolute;
   margin: 22px 25px;
  }

Lorem ipsum


Lorem ipsum dolor...
HTML 27
<div class="ab_27">
   <div class="par_27">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...          
   </div>
   <div class="ab27_1">
      <div class="ab271" id="as27"></div>
      <div class="ab272" id="as27"></div>
      <div class="ab273" id="as27"></div>
      <div class="ab274" id="as27"></div>
   </div>
   <div class="ab27_2">
      <div class="ab271" id="as27"></div>
      <div class="ab272" id="as27"></div>
      <div class="ab273" id="as27"></div>
      <div class="ab274" id="as27"></div>
   </div>     
</div>
CSS 27

  
   .ab_27{
      height: 350px;
      width: 250px;
      background:yellow;
      padding: 35px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as27{
      border-color: red ;
      position: absolute;
   }
   .ab271{
      height: 170px;
      width: 170px;
      border-top: 7px solid;
      border-left: 7px solid;
      border-top-left-radius: 40px;
      top: 20px;
      left: 20px;
   }
   .ab272{
      height: 220px;
      width: 220px;
      border-top: 7px solid;
      border-left: 7px solid;
      border-top-left-radius: 40px;
      top: 30px;
      left: 30px;
   }
   .ab273{
      height: 40px;
      width: 40px;
      background: yellow;
      border: 7px solid;
      transform: rotate(45deg);
      top: 20px;
      left: 20px;
   }
   .ab274{
      height: 20px;
      width: 20px;
      background: red;
      transform: rotate(45deg);
      top: 37px;
      left: 37px;
   }
   .ab27_2{
      position: absolute;
      transform: rotate(180deg);
      bottom: 0;
      right: 0;
   }
   .par_27{
      width: 170px;        
      position: absolute;
      margin: 20px 40px;
   }

Lorem ipsum


Lorem ipsum dolor...
HTML 28
<div class="ab_28">
   <div class="par_28">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...
   </div>
   <div class="ab28_1">
      <div class="ab281" id="as28"></div>
      <div class="ab282" id="as28"></div>
      <div class="ab283" id="as28"></div>
      <div class="ab284" id="as28"></div>
      <div class="ab285" id="as28"></div>
   </div>
   <div class="ab28_2">
      <div class="ab281" id="as28"></div>
      <div class="ab282" id="as28"></div>
      <div class="ab283" id="as28"></div>
      <div class="ab284" id="as28"></div>
      <div class="ab285" id="as28"></div>
   </div>  
</div>
CSS 28

   .ab_28{
      height: 350px;
      width: 250px;
      background:yellow;
      padding: 35px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as28{
      border-color: red;
      position: absolute;
   }
   .ab281{
      height: 230px;
      width: 230px;
      border-top: 6px solid;
      border-left: 6px solid;
      top: 10px;
      left: 10px;
   }
   .ab282{
      height: 100px;
      width: 100px;
      border-top: 6px solid;
      border-left: 6px solid;
      top: 25px;
      left: 25px;
   }
   .ab283{
      height: 9px;
      width: 9px;
      background: yellow;
      border: 6px solid;
      top: 10px;
      left: 10px;
   }
   .ab28_2{
      position: absolute;
      transform: rotate(180deg);
      bottom: 0;
      right: 0;
   }
   .par_28{
      width: 200px;        
      position: absolute;
      margin: 25px;
   }

Lorem ipsum


Lorem ipsum dolor...
HTML 29
<div class="ab_29">
   <div class="par_29">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...
   </div>
   <div class="ab29_1">
      <div class="ab291" id="as29"></div>
      <div class="ab292" id="as29"></div>
      <div class="ab293" id="as29"></div>
      <div class="ab294" id="as29"></div>
      <div class="ab295" id="as29"></div>
   </div>
   <div class="ab29_2">
      <div class="ab291" id="as29"></div>
      <div class="ab292" id="as29"></div>
      <div class="ab293" id="as29"></div>
      <div class="ab294" id="as29"></div>
      <div class="ab295" id="as29"></div>
   </div>     
</div>
CSS 29

   .ab_29{
      height: 350px;
      width: 250px;
      background:yellow;
      padding: 35px;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as29{
      border-color: red;
      position: absolute;
   }
   .ab291{
      height: 190px;
      width: 60px;
      border-left: 6px solid;
      border-bottom: 6px solid;
      bottom: 70px;
      left: 10px;
   }
   .ab292{
      height: 60px;
      width: 190px;
      border-left: 6px solid;
      border-bottom: 6px solid;
      left: 70px;
      bottom: 10px;
   }
   .ab293{
      height: 190px;
      width: 190px;
      border-left: 6px solid;
      border-bottom: 6px solid;
      left: 30px;
      bottom: 30px;
   }
   .ab294{
      height: 35px;
      width: 35px;
      border: 6px solid;
      left: 10px;
      bottom: 10px;
   }
   .ab295{
      height: 35px;
      width: 35px;
      border: 6px solid;
      left: 50px;
      bottom: 50px;
   }
   .ab29_1{
   }
   .ab29_2{
      position: absolute;
      top: 0;
      right: 0;
      transform: rotate(180deg);
   }
   .par_29{
      width: 200px;        
      position: absolute;
      margin: 55px 25px;
   }

Lorem ipsum


Lorem ipsum dolor...