border-bottom (CSS property)

Syntax

border-bottom: { [ border-width ] [ border-style ] [ border-color ] | inherit } ;

Description

The border-bottom shorthand property sets border-bottom-width and/or border-bottom-style and/or border-bottom-color

to the bottom side of an element simultaneously. Borders are placed on top of the element’s background.

Example

This style rule assigns a 2px blue border to the bottom side of paragraphs within the element with ID "example":

#example p {
  border-bottom: 2px solid blue;
}

Value

Refer to the following individual properties for specific information on allowed and initial values: border-width, border-style, and border-color

. Negative length values are illegal. As with most shorthand properties, you don’t need to specify all the properties listed, but any omitted properties will revert to their default values. In the case of border-style, if you omit a value no border will show at all, because the default value is none. A border will only be visible as long as the border-style property has been set to something other than none or hidden

, or has been restated explicitly after the initial shorthand declaration. Otherwise, no border will show and the border-width will be reset to zero. Therefore, its good practice to specify a value for the border’s style when you’re using shorthand notation.

Frequently Asked Questions about CSS Border-Bottom Property

How can I change the color of the border-bottom in CSS?

Changing the color of the border-bottom in CSS is quite simple. You can use the ‘border-bottom-color’ property to set the color. The value can be specified in different formats such as hexadecimal, RGB, RGBA, HSL, HSLA, or predefined color names. For example, to set the border-bottom color to red, you would use the following code:

element {
border-bottom-color: red;
}

Can I use different styles for the border-bottom in CSS?

Yes, you can use different styles for the border-bottom in CSS. The ‘border-bottom-style’ property allows you to set the style of the border. There are several values you can use, including ‘none’, ‘hidden’, ‘dotted’, ‘dashed’, ‘solid’, ‘double’, ‘groove’, ‘ridge’, ‘inset’, and ‘outset’. For example, to set a dotted border-bottom, you would use the following code:

element {
border-bottom-style: dotted;
}

How can I set the width of the border-bottom in CSS?

The width of the border-bottom in CSS can be set using the ‘border-bottom-width’ property. The value can be specified in different units such as pixels (px), em, rem, percentages (%), etc. For example, to set the border-bottom width to 2px, you would use the following code:

element {
border-bottom-width: 2px;
}

Can I use shorthand to set the border-bottom properties in CSS?

Yes, you can use shorthand to set the border-bottom properties in CSS. The ‘border-bottom’ property allows you to set the width, style, and color of the border-bottom in one declaration. The syntax is as follows:

element {
border-bottom: [width] [style] [color];
}

How can I remove the border-bottom in CSS?

To remove the border-bottom in CSS, you can use the ‘border-bottom-style’ property and set its value to ‘none’. Here’s how you can do it:

element {
border-bottom-style: none;
}

Can I set different borders for different sides of an element in CSS?

Yes, CSS allows you to set different borders for different sides of an element. You can use the ‘border-top’, ‘border-right’, ‘border-bottom’, and ‘border-left’ properties to set the borders for the respective sides.

How can I create a border-bottom with a gradient color in CSS?

Creating a border-bottom with a gradient color in CSS requires a bit more work as CSS does not directly support gradient borders. However, you can achieve this effect by using a pseudo-element and applying a linear gradient to it.

Can I animate the border-bottom property in CSS?

Yes, you can animate the border-bottom property in CSS using keyframes and the animation property. You can animate properties like ‘border-bottom-color’, ‘border-bottom-width’, and ‘border-bottom-style’.

How can I create a double border-bottom in CSS?

To create a double border-bottom in CSS, you can use the ‘border-bottom-style’ property and set its value to ‘double’. You can also specify the width of the border using the ‘border-bottom-width’ property.

Can I use the border-bottom property to create a divider line in CSS?

Yes, the ‘border-bottom’ property can be used to create a divider line in CSS. By setting the width and color of the border-bottom, you can create a line that separates different sections of your webpage.