CSS border
CSS border property is a shorthand to specify border width, style, and color.
The syntax to specify border is
border: border-width border-style border-color;
where
| Property | Mandatory/Optional | Examples |
|---|---|---|
| border-width | Optional | 1px, 2em |
| border-style | Mandatory | solid, dotted, double |
| border-color | Optional | #555, red, #55fffcdd |
Examples
border border-width border-style border-color
In the following example, we set a border for <h1> element, with border-width of 5px, border-style of solid, and border-color of red.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h1 {
border: 5px solid red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
border border-width border-style
In the following example, we set a border for <h1> element, with border-width of 5px, and border-style of solid. We do not specify any border-color.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h1 {
border: 5px solid;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
border border-style
In the following example, we set a border for <h1> element, with border-style of solid. We do not specify any width and color for the border.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h1 {
border: solid;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Conclusion
In this CSS Tutorial, we learned about border property, and how to use this property for HTML Elements, with examples.