×
☰ 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 6
<div class="ab6">
	<h1>Lorem ipsum</h1>
	<br>

	Lorem ipsum dolor ......

	<div class="ab61" id="as6"></div>
	<div class="ab62" id="as6"></div>
	<div class="ab63" id="as6"></div>
	<div class="ab64" id="as6"></div>
	<div class="ab65" id="as6"></div>
	<div class="ab66" id="as6"></div>	
</div>
CSS 6
  .ab6{
  	height: 350px;
  	width: 250px;
  	background:yellow;
  	padding: 35px;
  	color: black;
  	position: relative;
  	overflow: hidden;
  	text-align: justify;
  }
  #as6{
  	border: 4px red solid;
  	border-right: none;
  	border-bottom: none;
  	border-radius: 3px;
  	position: absolute;
  }
  .ab61{
  	height: 193px;
	width: 100px;
	top: 5px;
	left: 5px;
  }
  .ab62{
  	height: 146px;
	width: 146px;
	top: 13px;
	left: 13px;
  }
  .ab63{
  	height: 100px;
	width: 180px;
	top: 21px;
	left: 21px;
  }
  .ab64{
	height: 100px;
	width: 193px;
	bottom: 5px;
	right: 5px;
	transform: rotate(180deg);
  }
  .ab65{
  	height: 146px;
	width: 146px;
	bottom: 13px;
	right: 13px;
	transform: rotate(180deg);
  }
  .ab66{
  	height: 180px;
	width: 100px;
	bottom: 22px;
	right: 22px;
	transform: rotate(180deg);
  }

Lorem ipsum


Lorem ipsum dolor sit ......
HTML 12
<div class="ab_12">
	<h1>Lorem ipsum</h1><br>
	Lorem ipsum dolor...
	<div class="ab12_1">	
		<div class="ab121" id="as12"></div>
		<div class="ab122" id="as12"></div>
		<div class="ab123" id="as12"></div>
		<div class="ab124" id="as12"></div>
		<div class="ab125" id="as12"></div>
		<div class="ab126" id="as12"></div>
	</div>
	<div class="ab12_2">	
		<div class="ab121" id="as12"></div>
		<div class="ab122" id="as12"></div>
		<div class="ab123" id="as12"></div>
		<div class="ab124" id="as12"></div>
		<div class="ab125" id="as12"></div>
		<div class="ab126" id="as12"></div>
	</div>		
</div>
CSS 12

  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_12{
	height: 350px;
	width: 250px;
	background:yellow;
	padding: 55px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as12{
	border-color: black;
	border-right: none;
	border-bottom: none;
	border-radius: 3px;
	position: absolute;
  }
  .ab121{
	height: 50px;
	width: 200px;
	top: 20px;
	left: 20px;
	border: 3.5px solid;
  }
  .ab122{
  	height: 200px;
	width: 60px;
	top: 40px;
	left: 40px;
	border: 3.5px solid;
  }
  .ab123{
  	height: 100px;
	width: 130px;
	top: 30px;
	left: 30px;
	border: 3.5px solid;
  }
  .ab124{
	height: 30px;
	width: 30px;
	top: 10px;
	left: 10px;
	border-top: 3.5px solid;
	border-left: 3.5px solid;
	transform: rotate(180deg);
  }
  .ab12_2{
  	position: absolute;
  	right: 0px;
  	bottom: 0px;
	transform: rotate(180deg);
  }

Lorem ipsum


Lorem ipsum dolor...
HTML 16
<div class="ab_16">
	<div class="par_16">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...			
	</div>
	<div class="ab16_1">
		<div class="ab161" id="as16"></div>
		<div class="ab162" id="as16"></div>
		<div class="ab163" id="as16"></div>
		<div class="ab164" id="as16"></div>
		<div class="ab165" id="as16"></div>
		<div class="ab166" id="as16r"></div>
		<div class="ab167" id="as16r"></div>
		<div class="ab168" id="as16r"></div>
		<div class="ab169" id="as16r"></div>
		<div class="ab1610" id="as16r"></div>
	</div>
	<div class="ab16_2">
		<div class="ab161" id="as16"></div>
		<div class="ab162" id="as16"></div>
		<div class="ab163" id="as16"></div>
		<div class="ab164" id="as16"></div>
		<div class="ab165" id="as16"></div>
		<div class="ab166" id="as16r"></div>
		<div class="ab167" id="as16r"></div>
		<div class="ab168" id="as16r"></div>
		<div class="ab169" id="as16r"></div>
		<div class="ab1610" id="as16r"></div>
	</div>		
</div>
CSS 16

  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_16{
	height: 350px;
	width: 250px;
	background:yellow;
	padding: 35px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as16{
	border-color: black;
	position: absolute;
  }
  .ab161{
	height: 20px;
	width: 20px;
	border: 5px solid;
	top: 10px;
	left: 10px;
  }
  .ab162{
  	height: 280px;
	width: 280px;
	border: 5px solid;
	border-right: none;
	border-bottom: none;			
	top: 22.5px;
	left: 22.5px;
  }
  .ab163{
  	height: 120px;
	width: 120px;
	border: 5px solid;
	border-bottom: none;
	border-right: none;
	top: 35px;
	left: 35px;
  }
  .ab164{
	height: 150px;
	width: 60px;
	border: 5px solid;
	border-bottom: none;
	border-right: none;
	top: 50px;
	left: 10px;
  }
  .ab165{
  	height: 60px;
	width: 150px;
	border: 5px solid;
	border-bottom: none;
	border-right: none;
	left: 50px;
	top: 10px;
  }
  #as16r{
  	position: absolute;
  	height: 10px;
	width: 7px;
	background: yellow;
  }
  .ab166{  			
	top: 10px;
	left: 200px;
	transform: rotate(45deg);
  }
  .ab167{  			
	top: 22.5px;
	left: 302.5px;
	transform: rotate(45deg);
  }
  .ab168{			
	top: 35px;
	left: 155px;
	transform: rotate(45deg);
  }
  .ab169{  			
	top: 70px;
	left: 50px;
	transform: rotate(45deg);
  }
  .ab1610{  			
	top: 50px;
	left: 70px;
	transform: rotate(45deg);
  }
  .ab16_2{
  	position: absolute;
  	bottom: 0;
  	right: 0;
  	transform: rotate(180deg);
  }
  .par_16{
	position: absolute;
	height: 150px;
	width: 200px;
	margin: 30px 25px;
  }

Lorem ipsum


Lorem ipsum dolor...
HTML 41
<div class="ab_41">
	<div class="par_41">
		<h1>Lorem ipsum</h1>
	</div>
	<div class="ab41_1">
		<div class="ab411" id="as41"></div>
		<div class="ab412" id="as41"></div>
		<div class="ab413" id="as41"></div>
		<div class="ab414" id="as41"></div>
		<div class="ab415" id="as41"></div>
		<div class="ab416" id="as41"></div>
	</div>
	<div class="ab41_2">
		<div class="ab411" id="as41"></div>
		<div class="ab412" id="as41"></div>
		<div class="ab413" id="as41"></div>
		<div class="ab414" id="as41"></div>
		<div class="ab415" id="as41"></div>
		<div class="ab416" id="as41"></div>
	</div>	
</div>
CSS 41
 		
  	.ab_41{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as41{
		border-bottom: 4px red solid;
		border-right: 4px red solid;
		position: absolute;
	}
	.ab411{
		height: 10px;
		width: 10px;
		top: 5px;
		left: 5px;
  	}
  	.ab412{
  		height: 80px;
		width: 80px;			
		top: 15px;
		left: 15px;
		transform: rotate(180deg);
  	}
  	.ab413{
  		height: 5px;
		width: 5px;
		top: 19px;
		left: 19px;
  	}
  	.ab414{
		height: 220px;
		width: 220px;
		top: 24px;
		left: 24px;
		transform: rotate(180deg);
  	}
  	.ab415{
  		height: 33px;
		width: 33px;
		top: 0px;
		left: 0px;
  	}
  	.ab416{
  		height: 240px;
		width: 240px;
		top: 33px;
		left: 33px;
		transform: rotate(180deg);
  	}
  	.ab41_2{
  		position: absolute;
  		bottom: 0px;
  		right: 0px;
  		transform: rotate(180deg);
  	}
  	.par_41{
  		position: absolute;
  		height: 325px;
  		width: 225px;
  		border: 2px black solid;
  		font-size: 13.5px;
  		margin: 10px;
  	}

Lorem ipsum