- A border is rectangular line drawn along the 4 sides of an element.
- CSS can add borders with different styles of each side of an element.
- Customizable border properties include color,width ,style and radius.
Example
An <input> element with a custom border.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<input type="text" placeholder="Your email.."
style="border:5px solid lightseagreen;">
</body>
</html>
Output
The syntax for adding a border.
border : border-width border-style border-color
- border-width - sets the thickness of the border
- border-style - sets a border style: solid, double line, dashed, or others
- border-color - sets the border color. If not specified it inherits the parent's color
An element with a border.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border: 5px solid firebrick;
}
</style>
</head>
<body>
<div class="bordered">
Text inside a bordered container.
</div>
</body>
</html>
Output
The border-color property defines the border color .
This property accepts up to four values,one for each side.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
border-style: solid;
border-color: orangered;
padding: 20px;
}
</style>
</head>
<body>
<div class="bordered">
A border with a border-color
</div>
</body>
</html>
Output
Border Width
The border-width property sets the border width.
This property value can be any length value such as px , pt , cm, and em.
It accepts one to four values for the top, right, bottom, and left side.
|
Value |
Description |
|
thin |
Thin border |
|
medium |
Default. Medium border. |
|
thick |
Thick border. |
|
length |
Set thickness with CSS units: px, pt, em
etc. |
|
initial |
Set the values to its default value. |
|
inherit |
Inherits the value from its parent
element. |
thin
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: thin;
}
</style>
</head>
<body>
<div class="bordered">
border-width: thin
</div>
</body>
</html>
Output
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: medium;
}
</style>
</head>
<body>
<div class="bordered">
border-width: medium
</div>
</body>
</html>
Output
thick
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: thick;
}
</style>
</head>
<body>
<div class="bordered">
border-width: thick
</div>
</body>
</html>
Output
length
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: 10px;
}
</style>
</head>
<body>
<div class="bordered">
border-width: length 10px
</div>
</body>
</html>
Output
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: initial;
}
</style>
</head>
<body>
<div class="bordered">
border-width: initial
</div>
</body>
</html>
Output
inherit
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: inherit;
}
</style>
</head>
<body>
<div class="bordered">
border-width: inherit
</div>
</body>
</html>
Output
Border Style
The border-style property sets the line style : solid , dotted , dashed etc.
Each side of the element can have their own style.
This property is required to display a border.
|
VALUE |
DESCRIPTION |
|
dotted |
Defines a dotted
border |
|
dashed |
Defines a dashed
border |
|
solid |
Defines a solid
border |
|
double |
Defines a double
border |
|
groove |
Defines a 3D
grooved border. The effect depends on the border-color value |
|
ridge |
Defines a 3D
ridged border. The effect depends on the border-color value |
|
inset |
Defines a 3D inset
border. The effect depends on the border-color value |
|
outset |
Defines a 3D
outset border. The effect depends on the border-color value |
|
none |
Defines no border |
|
hidden |
Defines a hidden
border |
dotted
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-width: 5px;
border-color: firebrick;
border-style: dotted;
}
</style>
</head>
<body>
<div class="bordered">
border-style: dotted
</div>
</body>
</html>
Output
dashed
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-width: 5px;
border-color: firebrick;
border-style: dashed;
}
</style>
</head>
<body>
<div class="bordered">
border-style: dashed
</div>
</body>
</html>
Output
double
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
padding: 20px;
border-width: 5px;
border-color: firebrick;
border-style: double;
}
</style>
</head>
<body>
<div class="bordered">
border-style: double
</div>
</body>
</html>
Output
Set Individual Sides border
Each side of an element can have a different border.
- border-top , top border
- border-bottom , bottom border
- border-right , right border
- border-left , left border
An element with a different border on each side.
Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.bordered {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
border-color: limegreen;
border-width: 5px;
padding: 25px;
}
</style>
</head>
<body>
<div class="bordered">
Different border styles for each side.
</div>
</body>
</html>
Output
Notes:
Border : 0 and border : none remove the element's border.
The border : 0 sets the border-width to 0.
The border: none sets the border-style to none.
Border radius
The border-radius property adds rounded borders to an element.
Setting border-radius value to 50% applies a circular effects onto the element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.rounded-border {
margin: 10px 0;
padding: 25px;
border: 5px solid steelblue;
}
.round {
border-radius: 10px;
}
.rounder {
border-radius: 20px;
}
.roundest {
border-radius: 30px;
}
</style>
</head>
<body>
<div class="rounded-border round">Round border</div>
<div class="rounded-border rounder">Rounder border</div>
<div class="rounded-border roundest">Roundest border</div>
</body>
</html>
Output
No comments:
Post a Comment