CSS border-bottom Property


The border-bottom CSS property is used to define the styling of the bottom border of an element. It allows web developers to specify various aspects of the border, including its border-bottom-color, border-bottom-style, and border-bottom-width. This property is often used in conjunction with other border-related properties to create visually appealing and distinct design elements on a webpage. By adjusting the values of border-bottom, such as color, thickness, and whether it's solid, dashed, or dotted, designers can customize the appearance of underlines, separators, and other decorative or structural elements in their web layouts.

Initial value
See individual properties
Applies to
All elements
Computed value
See individual properties
JavaScript syntax

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.


border-bottom: <line-width> || <line-style> || <color>



<div class="border">This is an example of the border-bottom property using a blue solid border 3px in width.</div>
.border {
   border: 1px solid #800000;
   border-bottom: 3px solid #6699FF;
   margin: 20px;
   padding: 20px;

Browser Support

The following table will show you the current browser support for the CSS border-bottom property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023