The Developer Brains


BORDER PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 BORDER>





CSS3 border property allow us to specify the style, width, and color property of an HTML element's border.



SEE MORE




















</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





















We want to add a border with red color on top side of a container?
1. border-top: red top 2px;
2. border-top: border red;
3. border-top: top red;
4. border-top: solid red 2px;



Check Now



CSS3 QUIZ







Next: CSS3 Outline Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers