</CSS3 Border Property>

Apply Border Property on different HTML tags on your web pages

Border Property

If we want to change the style of the border of an HTML element the we can use CSS3 Border Property.

Example

{border-style :  solid;}
                 
property         value

Other Values

dotted - Used to define dotted border
solid - Used to define solid border
dashed - Used to define dashed border
double - Used to define double border
outset - Used to define 3D outset border.
groove - Used to define 3D grooved border.
ridge - Used to define 3D ridged border.
inset - Used to define 3D inset border.
none - Used to define no border
hidden - Used to define hidden border

							
							<!DOCTYPE html>
							<html>
								<head>
									<style>
									.tdb-school{
										background-color:white;
										padding:10px 35px;
										border-style:dotted;
										border-radius:5px}
									</style>
								</head>
							
								<!--Body-->
								<body>
									<button type="submit" class="tdb-school">
									button border properties
									</button>
								</body>
							</html>

Try it Yourself

</Other Properties>

Here are some other border propertieds.

Border Properties

border-width
border-color

border-width

Border-width defines the width of the border on an HTML element.

{border-width  :  10px}
             
property     value

border-color

Border-width defines the color of the border on an HTML element.

{border-color  :  green}
             
property     value


<!DOCTYPE html>
<html>
	<head>
		<style>
		.tdb-school{
			background-color:white;
			border-color:red;
			border-width:10px;
			padding:10px 35px;
			border-radius:5px}
		</style>
	</head>

	<!--Body-->
	<body>
		<button type="submit" class="tdb-school">
		button border properties
		</button>
	</body>
</html>

Try it Yourself

</Border Radius Property>

Border radius property is used to set the curve shape (rounded corners) while applying on HTML elements.

Border Radius Property

We can change the shape of an HTML element by applying CSS3 border radius property CSS3 Border Property.

Syntax

{border-radius: 10px;}
                
property        value

We can use length units px, %, em etc. as the value of border radius. The value 10px sets the all corner to 10px (curve shape). If we want to set different value for different corner then we can use these properties (given below).

Properties

border-top-left-radius - Used to set top left corner value
border-top-right-radius - Used to set top left corner value
border-bottom-right-radius - Used to set top left corner value
border-bottom-left-radius - Used to set top left corner value

Border radius shorthand property

border-radius: 20% 80% 20% 80%

							
							<!DOCTYPE html>
							<html>
								<head>
									<style>
									.tdb-school{
										border-radius:20% 80% 20% 80%;
										padding:50px;
										width:100px;
										color:white;
										text-align:center;
										background:linear-gradient(130deg,black,red);
										}
									</style>
								</head>
							
								<!--Body-->
								<body>
									<div class="tdb-school">
										border-radius
									</div>
								</body>
							</html>

Try it Yourself

</Border Shorthand Property>

We can also use border Shorthand Property.

Border Shorthand Property

If you don't want to write different CSS rules for border property then you can use border Shorthand property.

{border:  color style width}
              
property      value


<style>
	/*order shorthans*/ 
	.parent{
		border: color style width;
	}
</style>


<!DOCTYPE html>
<html>
	<!--Body-->
	<body>
		<button type="submit" class="tdb-school" 
		style="border:black double 5px;padding:10px 35px;">
		button border properties
		</button>
	</body>
</html>

Try it Yourself

Border Image Property

If you want to set the border image on an HTML element's border, you can use border-image property.

{border-image  :  url(js.png) 25 round}
                    
property             value


<style>
	/*order shorthans*/ 
	.parent{
		border-image: url(js.png) 20 round;
	}
</style>


<style>
	/*order shorthans*/ 
	.tdb-image{
		border-image: url(js.png) 20 round;
		padding:25px;
	}
</style>
	<body>
		<button class="tdb-image" type="submit"
		 class="tdb-school">
		border-image properties
		</button>
	</body>

Try it Yourself

BORDER PROPERTY

</CSS3 BORDER>