border-bottom-style

border-bottom

The border-bottom shorthand CSS property sets an element’s bottom border. It sets the values of border-bottom-width , border-bottom-style and border-bottom-color .

Try it

As with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

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

It is actually the same as this one:

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

The value of border-bottom-style given before border-bottom is ignored. Since the default value of border-bottom-style is none , not specifying the border-style part results in no border.

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; /* Global values */ border-bottom: inherit; border-bottom: initial; border-bottom: revert; border-bottom: revert-layer; border-bottom: unset; 

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 : medium
• border-bottom-style : none
• border-bottom-color : currentcolor

• border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
• border-bottom-style : as specified
• border-bottom-color : computed color

• border-bottom-color : a color
• border-bottom-style : discrete
• border-bottom-width : a length

Formal syntax

border-bottom =
||
||

=
|
thin |
medium |
thick

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
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

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 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-style

none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае нижняя граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

HTML5 CSS2.1 IE Cr Op Sa Fx

        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
  

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

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

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

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

Браузеры

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

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

CSS по категориям

Поля

Анимация

Градиент

Скруглённые уголки

Изображения

Псевдоэлементы

Псевдоклассы

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

Форматирование

Размеры

Позиционирование

Границы

Цвет и фон

Селекторы

• Селекторы тегов
• Идентификаторы
• Классы
• Мультиклассы
• Универсальный селектор
• Вложенные селекторы
• Дочерние селекторы
• Соседние селекторы
• Родственные селекторы
• Селекторы атрибутов
• [атрибут=»значение»]
• [атрибут^=»значение»]
• [атрибут$=»значение»]
• [атрибут*=»значение»]
• [атрибут~=»значение»]
• [атрибут|=»значение»]

Источник

HTML Table Border

This page contains HTML table border code — HTML codes for specifying or changing the border of your tables within your blog or web page.

HTML table borders are specified using Cascading Style Sheets (CSS). To set the border of an HTML table, use the CSS border property.

Typical Table Border

Here’s a common way to set borders on a table:

This provides that «grid» like effect, where the border surrounds each cell as well as the whole table.

Notice that I used border-collapse: collapse; against the table element. This collapses the border so that you don’t see any space between the cells and the outside of the table.

Without Collapsing the Border

Here it is without collapsing the border. I’ve also applied the border against the table element in order to demonstrate the effect:

You can see that I’ve also added padding to the th and td selectors but not to the table itself. If we include the padding against the table, we’d end up with extra padding between the outer cells and the outside of the table.

There’s nothing wrong with that if that’s what you want. However, if you don’t want padding between the table and its cells, you’ll need to apply the padding to just the cells.

Bottom Border

The above examples use the CSS border property to set the borders. This is a shorthand property to set border width, style, and color on all sides of the table.

If you don’t want the border to go all around the table (or if you want a different border on each side of the table), you can use any of the following properties: border-top , border-right , border-bottom , and border-left .

Here’s an example of setting the border to only appear at the bottom of each table cell.

Border and Alternating Background Colors

A common usage of tables is for each row to have alternating background colors.

You can apply borders against these tables just like any other table:

No Border on Table Headers

You can also remove the border from the th element.

You can either remove the border from the styles by using border: none; against the th selector (but it has to follow the border declaration), or just not apply the border in the first place.

Here’s an example of the later:

Rounded Corners

Here’s an example of adding a border with curved/rounded corners to the table. In the CSS3 specification, rounded corners are specified using the border-radius property.

Note that we need to remove the border-collapse property for this work.

I also set the border-spacing property to zero, so that the cell borders continue smoothly without being interrupted by a space. Remove this property and click Run to see what I mean.

The Border Properties

CSS provides quite a number of border related properties to assist you in creating borders. These properties can be applied to any HTML element, not just tables.

For a full list of border properties, go to CSS Properties and filter by «border».

Related

Источник

HTML Table Border

This page contains HTML table border code — HTML codes for specifying or changing the border of your tables within your blog or web page.

HTML table borders are specified using Cascading Style Sheets (CSS). To set the border of an HTML table, use the CSS border property.

Typical Table Border

Here’s a common way to set borders on a table:

This provides that «grid» like effect, where the border surrounds each cell as well as the whole table.

Notice that I used border-collapse: collapse; against the table element. This collapses the border so that you don’t see any space between the cells and the outside of the table.

Without Collapsing the Border

Here it is without collapsing the border. I’ve also applied the border against the table element in order to demonstrate the effect:

You can see that I’ve also added padding to the th and td selectors but not to the table itself. If we include the padding against the table, we’d end up with extra padding between the outer cells and the outside of the table.

There’s nothing wrong with that if that’s what you want. However, if you don’t want padding between the table and its cells, you’ll need to apply the padding to just the cells.

Bottom Border

The above examples use the CSS border property to set the borders. This is a shorthand property to set border width, style, and color on all sides of the table.

If you don’t want the border to go all around the table (or if you want a different border on each side of the table), you can use any of the following properties: border-top , border-right , border-bottom , and border-left .

Here’s an example of setting the border to only appear at the bottom of each table cell.

Border and Alternating Background Colors

A common usage of tables is for each row to have alternating background colors.

You can apply borders against these tables just like any other table:

No Border on Table Headers

You can also remove the border from the th element.

You can either remove the border from the styles by using border: none; against the th selector (but it has to follow the border declaration), or just not apply the border in the first place.

Here’s an example of the later:

Rounded Corners

Here’s an example of adding a border with curved/rounded corners to the table. In the CSS3 specification, rounded corners are specified using the border-radius property.

Note that we need to remove the border-collapse property for this work.

I also set the border-spacing property to zero, so that the cell borders continue smoothly without being interrupted by a space. Remove this property and click Run to see what I mean.

The Border Properties

CSS provides quite a number of border related properties to assist you in creating borders. These properties can be applied to any HTML element, not just tables.

For a full list of border properties, go to CSS Properties and filter by «border».

Related

Источник