In CSS, the border property allows you to define the style, width, and color of an element’s border. You can apply borders to all sides of an element or specify individual borders for each side (top, right, bottom, and left).
1. Basic Syntax for Border:
css
selector {
border: [border-width] [border-style] [border-color];
}
- border-width: Defines the thickness of the border (e.g.,
1px,2em,thin,medium,thick). - border-style: Specifies the style of the border (e.g.,
solid,dashed,dotted,double,none). - border-color: Sets the color of the border (e.g.,
red,#000,rgb(0, 0, 0)).
2. Example of a Simple Border:
css
div {
border: 2px solid black;
}
- This gives the
<div>element a 2px solid black border on all sides.
3. Individual Border Properties:
You can also set the border properties individually for each side of the element.
Border Width:
css
div {
border-top-width: 5px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
Border Style:
css
div {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
}
Border Color:
css
div {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
4. Shorthand for Borders on Each Side:
You can also set different borders for each side using the shorthand border-[side] property.
Example for Different Borders on Each Side:
css
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px double yellow;
}
5. Border-Radius (Rounded Corners):
The border-radius property allows you to create rounded corners for an element’s border.
Single Value (Uniform Radius):
css
div {
border: 2px solid black;
border-radius: 10px;
}
- This applies a 10px radius to all corners.
Different Values for Each Corner:
css
div {
border: 2px solid black;
border-radius: 10px 20px 30px 40px;
}
- This applies a different radius to each corner in a clockwise order: top-left (10px), top-right (20px), bottom-right (30px), bottom-left (40px).
6. Advanced: Border Image:
You can use images as borders with the border-image property.
Example with Border Image:
css
div {
border: 10px solid transparent;
border-image: url('border-image.png') 30 stretch;
}
- This sets an image as the border. The
30defines how much of the image is used on each side, andstretchstretches the image to fit the border area.
7. Example: Complex Border Styles:
css
div {
border-top: 4px dashed red;
border-right: 6px double green;
border-bottom: 3px dotted blue;
border-left: 5px solid purple;
border-radius: 15px;
}
This will apply different border styles on each side with rounded corners, creating a unique border design.
Common Border Styles:
Here are some common border styles you can use:
none: No border.solid: A solid line.dashed: A dashed line.dotted: A dotted line.double: A double line.groove: Creates a carved-in effect.ridge: Creates a raised effect.inset: Appears like the border is embedded into the page.outset: Makes the element look like it is coming out of the page.
