The CSS border property allow you to specify the style, width, color, radius, etc. of an element’s border. The element’s border is the line that can appear on any of an element’s sides or all of the sides. It can have varying thicknesses, colors, styles, etc.
Each side of the element can be styled separately from the others, or all can be styled as one.
For instance, the note below has a solid, green, 4px border applied to just the left side of the element.
To have a border, the width and style must be set. If the color is not specified, the color of the text will be used.
div {
border-width: 1px;
border-style: solid;
}
Border Color
The border-color property sets the color of all four borders of an element, and can have from one to four values.
/* set all 4 borders to red */
div {
border-color: red;
}
Border Style
The border-style property sets the style of all four borders of an element, and can have from one to four values.
/* sets all 4 borders */
div {
border-style: dashed;
}
Border Width
The border-width property sets the width of an element’s borders. An element must have a border before you can change the width.
/* sets all 4 borders */
div {
border-width: thick;
}
Border Image
The border-image property allows for the use of an image as the border of an element.
/* file location, border width, image repeats */
div {
border-image: url(border_image.jpg) 15 repeat;
}
Border Radius
The border-radius property defines the radius of an element’s corners to give the element rounded corners. This property can have from one to four values.
/* all borders have an equal radius */
div {
border-radius: 20px;
}
Border Properties
- CSS – border Property
- CSS – border-image-source Property
- CSS – border-image-width Property
- CSS – border-bottom Property
- CSS – border-bottom-color Property
- CSS – border-bottom-left-radius Property
- CSS – border-bottom-right-radius Property
- CSS – border-bottom-style Property
- CSS – border-bottom-width Property
- CSS – border-collapse Property
- CSS – border-color Property
- CSS – border-image Property
- CSS – border-image-outset Property
- CSS – border-image-repeat Property
- CSS – border-image-slice Property
- CSS – border-left-color Property
- CSS – border-left Property
- CSS – border-left-style Property
- CSS – border-left-width Property
- CSS – border-radius Property
- CSS – border-right Property
- CSS – border-right-color Property
- CSS – border-right-style Property
- CSS – border-right-width Property
- CSS – border-style Property
- CSS – border-top Property
- CSS – border-top-color Property
- CSS – border-top-left-radius Property
- CSS – border-top-right-radius Property
- CSS – border-top-style Property
- CSS – border-top-width Property
- CSS – border-width Property
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
