CSS3 Border Property
2021-11-16 18:14 · 7 min read
CSS3 border property allows us to specify the style, width, and color property of an HTML element's border.
Border Property
If we want to change the style of the border of an HTML element 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 the 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>Border Radius Property
Border radius property is used to set the curve shape (rounded corners) while applying on HTML elements.
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 values for a 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>
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>
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>
