×
☰ 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 18
<div class="ab_18">
   <div class="par_18">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...
   </div>
      <div class="ab181" id="as18"></div>
      <div class="ab182" id="as18"></div>
      <div class="ab183" id="as18"></div>
      <div class="ab184" id="as18"></div>
      <div class="ab185" id="as18"></div>
      <div class="ab186" id="as18"></div>
      <div class="ab187" id="as18"></div>
      <div class="ab188" id="as18"></div>
      <div class="ab189" id="as18"></div>
      <div class="ab1810" id="as18"></div>
      <div class="ab1811" id="as18"></div>
      <div class="ab1812" id="as18"></div>
      <div class="ab1813" id="as18"></div>
      <div class="ab1814" id="as18"></div>          
</div>
CSS 18

  *{
   margin: 0px;
   padding: 0px;
  }   
  .ab_18{
   height: 350px;
   width: 350px;
   background:yellow;
   color: black;
   position: relative;
   overflow: hidden;
   text-align: justify;
  }
  #as18{
   position: absolute;
   border: 3.5px blue solid;
   border-top: none;
   border-bottom: none;
   border-radius: 50px;
  }
  .ab181{
   height: 240px;
   width: 240px;        
   top: 51.5px;
   left: 51.5px;
  }
  .ab182{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(15deg);
  }
  .ab183{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(25deg);
  }
  .ab184{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(35deg);
  }
  .ab185{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(45deg);
  }
  .ab186{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(55deg);
  }
  .ab187{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(65deg);
  }
  .ab188{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(75deg);
  }
  .ab189{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(85deg);
  }
  .ab1810{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(95deg);
  }
  .ab1811{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(105deg);
  }
  .ab1812{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(115deg);
  }
  .ab1813{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(125deg);
  }
  .ab1814{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(135deg);
  }
  .par_18{
   position: absolute;
   height: 150px;
   width: 150px;
   font-size: 13.5px;
   margin: 85px 80px 80px 110px;
  }

Lorem ipsum


Lorem ipsum dolor...
HTML 22

<div class="ab_22">
   <div class="par_22">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor...
   </div>
      <div class="ab221" id="as22"></div>
      <div class="ab222" id="as22"></div>
      <div class="ab223" id="as22"></div>
      <div class="ab224" id="as22"></div>
      <div class="ab225" id="as22"></div>
      <div class="ab226" id="as22"></div>
      <div class="ab227" id="as22"></div>
      <div class="ab228" id="as22"></div>
      <div class="ab229" id="as22"></div>
      <div class="ab2210" id="as22"></div>
      <div class="ab2211" id="as22"></div>
      <div class="ab2212" id="as22"></div>
      <div class="ab2213" id="as22"></div>
      <div class="ab2214" id="as22"></div>
      <div class="ab2215" id="as22"></div>
      <div class="ab2216" id="as22"></div>
      <div class="ab2217" id="as22"></div>
      <div class="ab2218" id="as22"></div>
      <div class="ab2219" id="as22"></div>
      <div class="ab2220" id="as22"></div>
      <div class="ab2221" id="as22"></div>
      <div class="ab2222" id="as22"></div>
      <div class="ab2223" id="as22"></div>
      <div class="ab2224" id="as22"></div>    
</div>
CSS 22
   .ab_22{
      height: 350px;
      width: 350px;
      background:yellow;
      color: black;
      position: relative;
      overflow: hidden;
      text-align: justify;
   }
   #as22{
      position: absolute;
      border: 3.5px blue solid;
      border-top: none;
      border-bottom: none;
      border-radius: 80px; /* <  and   >border-radius    */
   }
   .ab221{
      height: 240px;
      width: 240px;        
      top: 51.5px;
      left: 51.5px;
   }
   .ab222{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(15deg);
   }
   .ab223{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(25deg);
   }
   .ab224{
      height: 240px;
      width: 240px;
      top: 51.5px;
      left: 51.5px;
      transform: rotate(35deg);
   }
   .ab225{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(45deg);
   }
   .ab226{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(55deg);
   }
   .ab227{
      height: 240px;
      width: 240px;
      top: 51.5px;
      left: 51.5px;
      transform: rotate(65deg);
   }
   .ab228{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(75deg);
   }
   .ab229{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(85deg);
   }
   .ab2210{
      height: 240px;
      width: 240px;
      top: 51.5px;
      left: 51.5px;
      transform: rotate(95deg);
   }
   .ab2211{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(105deg);
   }
   .ab2212{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(115deg);
   }
   .ab2213{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(125deg);
   }
   .ab2214{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(135deg);
   }
   .ab2215{
      height: 240px;
      width: 240px;        
      top: 51.5px;
      left: 51.5px;
      transform: rotate(145deg);
   }
   .ab2216{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(155deg);
   }
   .ab2217{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(165deg);
   }
   .ab2218{
      height: 240px;
      width: 240px;
      top: 51.5px;
      left: 51.5px;
      transform: rotate(175deg);
   }
   .ab2219{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(185deg);
   }
   .ab2220{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(195deg);
   }
   .ab2221{
      height: 240px;
      width: 240px;
      top: 51.5px;
      left: 51.5px;
      transform: rotate(205deg);
   }
   .ab2222{
      height: 230px;
      width: 230px;
      top: 56.5px;
      left: 56.5px;
      transform: rotate(215deg);
   }
   .ab2223{
      height: 220px;
      width: 220px;
      top: 61.5px;
      left: 61.5px;
      transform: rotate(225deg);
   }
   .ab2224{
      height: 240px;
      width: 240px;
      top: 51.5px;
      left: 51.5px;
      transform: rotate(235deg);
   }
   .par_22{
      position: absolute;
      height: 150px;
      width: 150px;
      font-size: 13.5px;
      margin: 85px 80px 80px 110px;
   }

Lorem ipsum


Lorem ipsum dolor...
HTML 39
<div class="ab_39">
   <div class="par_39">
      <h1>Lorem ipsum</h1>
      <br>
      Lorem ipsum dolor......
   </div>
   <div class="ab391" id="as39"></div>
   <div class="ab392" id="as39"></div>
   <div class="ab393" id="as39"></div>
   <div class="ab394" id="as39"></div>
   <div class="ab395" id="as39"></div>
   <div class="ab396" id="as39"></div>
   <div class="ab397" id="as39"></div>
   <div class="ab398" id="as39"></div>
   <div class="ab399" id="as39"></div>
   <div class="ab3910" id="as39"></div>
   <div class="ab3911" id="as39"></div>
   <div class="ab3912" id="as39"></div>
   <div class="ab3913" id="as39"></div>
   <div class="ab3914" id="as39"></div> 
</div>
CSS 39
   
   .ab_39{
   height: 350px;
   width: 350px;
   background:yellow;
   color: black;
   position: relative;
   overflow: hidden;
   text-align: justify;
  }
  #as39{
   position: absolute;        /* <  and   >  border-radius  */
   border-radius: 50px;
   border: 3px blue solid;
  }
  .ab391{
   height: 240px;
   width: 240px;        
   top: 51.5px;
   left: 51.5px;
  }
  .ab392{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(15deg);
  }
  .ab393{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(25deg);
  }
  .ab394{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(35deg);
  }
  .ab395{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(45deg);
  }
  .ab396{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(55deg);
  }
  .ab397{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(65deg);
  }
  .ab398{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(75deg);
  }
  .ab399{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(85deg);
  }
  .ab3910{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(95deg);
  }
  .ab3911{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(105deg);
  }
  .ab3912{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(115deg);
  }
  .ab3913{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(125deg);
  }
  .ab3914{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(135deg);
  }
  .ab3915{
   height: 240px;
   width: 240px;        
   top: 51.5px;
   left: 51.5px;
   transform: rotate(145deg);
  }
  .ab3916{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(155deg);
  }
  .ab3917{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(165deg);
  }
  .ab3918{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(175deg);
  }
  .ab3919{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(185deg);
  }
  .ab3920{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(195deg);
  }
  .ab3921{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(205deg);
  }
  .ab3922{
   height: 230px;
   width: 230px;
   top: 56.5px;
   left: 56.5px;
   transform: rotate(215deg);
  }
  .ab3923{
   height: 220px;
   width: 220px;
   top: 61.5px;
   left: 61.5px;
   transform: rotate(225deg);
  }
  .ab3924{
   height: 240px;
   width: 240px;
   top: 51.5px;
   left: 51.5px;
   transform: rotate(235deg);
  }
  .par_39{
   position: absolute;
   height: 150px;
   width: 150px;
   font-size: 13.5px;
   margin: 85px 80px 80px 110px;
  }

Lorem ipsum


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.