border-bottom

CSS border-bottom Property

Set the style of the bottom border for different elements:

h1 <
border-bottom: 5px solid red;
>

h2 border-bottom: 4px dotted blue;
>

Definition and Usage

The border-bottom property is a shorthand property for (in the following order):

If border-bottom-color is omitted, the color applied will be the color of the text.

Default value:	medium none color
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.borderBottom=»15px dotted lightblue» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
border-bottom-width	Required. Specifies the width of the bottom border. Default value is «medium»	Demo ❯
border-bottom-style	Required. Specifies the style of the bottom border. Default value is «none»	Demo ❯
border-bottom-color	Optional. Specifies the color of the bottom border. Default value is the color of the text	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

border-bottom

Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что .

border-bottom-style: dotted; border-bottom: thick green; 

border-bottom-style: dotted; border-bottom: none thick green; 

. и значение border-bottom-style (en-US), указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для border-bottom-style (en-US) является none , то без указания border-style граница не будет показана.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; 

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

Formal definition

• border-bottom-width (en-US): medium
• border-bottom-style (en-US): none
• border-bottom-color (en-US): currentcolor

• border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
• border-bottom-style (en-US): как указано
• border-bottom-color (en-US): вычисленный цвет

• border-bottom-color (en-US): цвет
• border-bottom-style (en-US): discrete
• border-bottom-width (en-US): длина

Formal syntax

border-bottom =
|| (en-US)
|| (en-US)

=
| (en-US)
thin | (en-US)
medium | (en-US)
thick

=
none | (en-US)
hidden | (en-US)
dotted | (en-US)
dashed | (en-US)
solid | (en-US)
double | (en-US)
groove | (en-US)
ridge | (en-US)
inset | (en-US)
outset

Examples

Applying a bottom border

HTML

div> This box has a border on the bottom side. div> 

CSS

div  border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; > 

Results

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 Определение ‘border-bottom’ в этой спецификации.	Кандидат в рекомендации	No direct changes, though the modification of values for the border-bottom-color (en-US) do apply to it.
CSS Level 2 (Revision 1) Определение ‘border-bottom’ в этой спецификации.	Рекомендация	No significant changes.
CSS Level 1 Определение ‘border-bottom’ в этой спецификации.	Рекомендация	Initial definition

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

border-bottom

Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Синтаксис

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style . Их названия и результат действия представлен на рис. 1.

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom

Объектная модель

[window.]document.getElementById(» elementID «).style.borderBottom

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Источник

Multiple Borders

You can position a pseudo element such that it’s either behind the element, and larger, making a border effect with it’s own background, or smaller and inside (but make sure the content gets positioned on top). The element needing multiple borders should have its own border and relative positioning.

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value. Careful with negative z-index, if this is within yet another element with it’s own background color, this may not work.

See the Pen gbgRqZ by Chris Coyier (@chriscoyier) on CodePen. You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before , but not allowing them to be absolutely positioned (so it looks weird).

While it’s a bit more limited than border (goes around entire element no matter what) outline is a extra free border.

You can use box-shadow to make a border effect, by making the the shadow offset and have 0 blur. Plus, by comma-separating values, you can have as many “borders” as you like:

Using a clipped background

You can make the background of an element stop before the padding. That way an elements normal border can look like a double border in a way.

Источник

Multiple Borders

You can position a pseudo element such that it’s either behind the element, and larger, making a border effect with it’s own background, or smaller and inside (but make sure the content gets positioned on top). The element needing multiple borders should have its own border and relative positioning.

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value. Careful with negative z-index, if this is within yet another element with it’s own background color, this may not work.

See the Pen gbgRqZ by Chris Coyier (@chriscoyier) on CodePen. You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before , but not allowing them to be absolutely positioned (so it looks weird).

While it’s a bit more limited than border (goes around entire element no matter what) outline is a extra free border.

You can use box-shadow to make a border effect, by making the the shadow offset and have 0 blur. Plus, by comma-separating values, you can have as many “borders” as you like:

Using a clipped background

You can make the background of an element stop before the padding. That way an elements normal border can look like a double border in a way.

Источник