CSS Borders: Style, Width, Color and Rounded Corners
The CSS border properties draw a border around an element's box. A visible border normally needs a style; width and color alone do not make a default none border appear.
.box {
border: 2px solid #0d6efd;
}Border shorthand Top ↑
The border shorthand commonly combines width, style and color.
.notice { border: 1px solid #6c757d; }border-style values Top ↑
Common styles include solid, dashed, dotted, double, groove, ridge, inset, outset, none and hidden.
Style individual sides Top ↑
.card {
border-top: 4px solid #198754;
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
border-left: 1px solid #dee2e6;
}Rounded corners with border-radius Top ↑
.button-like {
border: 1px solid #0d6efd;
border-radius: 0.5rem;
}border-radius rounds the corners; it is independent of whether a visible border is drawn.
Borders and element size Top ↑
With the default box-sizing: content-box, border and padding are added outside the declared content width. Many layouts use box-sizing: border-box so declared width includes padding and border.
Frequently Asked Questions Top ↑
Why is my CSS border invisible?
Check that border-style is not none and that the border has a visible width and color.
Can every side have a different border?
Yes. Use border-top, border-right, border-bottom and border-left.
What does border-radius do?
It rounds one or more corners of the element's border box.
Can I generate a font style here?
The existing CSS generator focuses on font properties; border values are best written directly or through a browser developer tool.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
