CSS Border Properties
The CSS border properties allow you to specify the style, width, and color of an element’s border.
Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted– Defines a dotted borderdashed– Defines a dashed bordersolid– Defines a solid borderdouble– Defines a double bordergroove– Defines a 3D grooved border.ridge– Defines a 3D ridged border.inset– Defines a 3D inset border.outset– Defines a 3D outset border.none– Defines no border.hidden– Defines a hidden border.
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
If the border-style property has four values:
- border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
If the border-style property has three values:
- border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
If the border-style property has two values:
- border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
If the border-style property has one value:
- border-style: dotted;
- all four borders are dotted
Example 1-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
h1{border-style: dotted;}
h2{border-style: dashed;}
h3 {border-style: solid;}
h4{border-style: double;}
h5{border-style: groove;}
h6{border-style: ridge;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<h1>A dotted border.</h1>
<h2>A dashed border.</h2>
<h3>A solid border.</h3>
<h4>A double border.</h4>
<h5>A groove border.</h5>
<h6>A ridge border.</h6>
</body>
</html>
Output-
Example 2-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
h1{border-style: inset;}
h2 {border-style: outset;}
h3 {border-style: none;}
h4 {border-style: hidden;}
h5{border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<h1>An inset border.</h1>
<h2>An outset border.</h2>
<h3>No border.</h3>
<h4>A hidden border.</h4>
<h5>A mixed border.</5>
</body>
</html>
Output-
Example 3-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
h3{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<h3> Two different border styles</h3>
<p> Two different border styles.</p>
</body>
</html>
Border Width
The border-width property specifies the width of the four borders.
The width can be set to a specific size (in px, pt, cm, etc) or by using one of the three pre-defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
h2 {
border-style: solid;
border-width: 5px;
}
h3 {
border-style: solid;
border-width: medium;
}
h4 {
border-style: dotted;
border-width: 2px;
}
h5 {
border-style: dotted;
border-width: thick;
}
h6 {
border-style: double;
border-width: 15px;
}
p {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<h3>Science Academy of Chicago</h3>
<h4>Science Academy of Chicago</h4>
<h5>Science Academy of Chicago</h5>
<h6>Science Academy of Chicago.</h6>
<p>Science Academy of Chicago</p>
</body>
</html>
Output-
Border-color
The border-color property sets the color of an element’s four borders. This property can have from one to four values.
If the border-color property has four values:
- border-color: red green blue pink;
- top border is red
- right border is green
- bottom border is blue
- left border is pink
If the border-color property has three values:
- border-color: red green blue;
- top border is red
- right and left borders are green
- bottom border is blue
If the border-color property has two values:
- border-color: red green;
- top and bottom borders are red
- right and left borders are green
If the border-color property has one value:
- border-color: red;
- all four borders are red
Example 5-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
h1 {
border-style: solid;
border-color: coral;
}
p {
border-style: dashed;
border-color: Teal;
}
</style>
</head>
<body>
<h1>Science Academy of Chicago</h1>
<p><strong>Note:</strong> Private school from Pre-K to 8th Grade. </p>
</body>
</html>
Output-
Try It Yourself-
Border Radius-
The border-radius property defines the radius of the element’s corners. This property allows you to add rounded borders to elements!
This property can have from one to four values. Here are the rules:
Four values – border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner).
Example-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
p {
border-radius: 10px 50px 25px 70px;
background: #3BA17F;
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<p> Rounded corners!</p>
</body>
</html>
Three values – border-radius: 10px 50px 25px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner).
Example-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
p {
border-radius: 10px 50px 25px;
background: #3BA17F;
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<p> Rounded corners!</p>
</body>
</html>
Two values – border-radius: 10px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners).
Example-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
p {
border-radius: 10px 50px;
background: #3BA17F;
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<p> Rounded corners!</p>
</body>
</html>
One value – border-radius: 10px; (the value applies to all four corners, which are rounded equally.
Example-
<!DOCTYPE html>
<html lang = “en-us”>
<head>
<style>
p {
border-radius: 10px;
background: #3BA17F;
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<p> Rounded corners!</p>
</body>
</html>
Exercise-
Write code using HTML5 & CSS3 to generate the following outputs:
2.
Computer Technology 