.jpeg)
CSS Border
- The CSS border property is used to create borders around HTML elements.
- Borders help to define the layout and improve the visual appearance of webpages.
- CSS borders can be customized using width, style, and color properties.
- The border property is a shorthand property that combines multiple border properties.
What is CSS Border?
The CSS border property is used to add a border around an element.
A border can be applied to elements like divs, images, buttons, tables, and containers.
CSS allows developers to control the border thickness, style, and color to create attractive and organized web layouts.
CSS Border Syntax
div {
border:
2px solid black;
}
CSS Border Properties
border-width
Defines the thickness of the border.
border-style
Defines the style of the border such as solid, dotted, or dashed.
border-color
Sets the color of the border.
border
Shorthand property to set width, style, and color together.
CSS Border Style
The border-style property defines the appearance of the border.
solid
Creates a single solid line border.
dashed
Creates a border with dashed lines.
dotted
Creates a dotted border.
double
Creates a double line border.
Using CSS Border Width
The border-width property controls the thickness of the border.
.box {
border-width:
5px;
}
Using CSS Border Color
The border-color property is used to specify the color of the border.
div {
border-color:
blue;
}
Using Border Shorthand Property
The shorthand border property allows you to set border width, style, and color in a single line.
button {
border:
3px solid green;
}
CSS Border Individual Sides
CSS allows you to apply borders separately to the top, right, bottom, and left sides.
div {
border-top:
2px solid red;
border-bottom:
2px solid blue;
}