Border bottom css длина

How to Limit Border Length with CSS

Sometimes, you may have difficulty when you need to make the border shorter than its parent element. To overcome this, use CSS properties and HTML elements. We’ll need to use border properties and some elements such as , , etc., or pseudo-elements.

The solution is quite easy. The idea is to create another «invisible» div inside the desired div, and just make the border for the inside div. In order for this solution to work, you need to place the child div very carefully, as it will be shown below.

Create HTML

div id="box"> div id="borderLeft"> div> div>

Add CSS

• Style the with an id «box» by using the height, width, and background properties. Set the position to “relative” and specify the border-bottom property. This will be the parent div. We want the bottom border of this div to be shown completely, but the left border we just want the bottom-half of it to be shown.
• Style the with an id «borderLeft» by specifying its border-left property. Set the position to “absolute” and add the top and bottom properties. This is the child div. By showing the border of this div, we make the limited-length border of the parent div.

#box < height: 70px; width: 70px; position: relative; border-bottom: 2px solid #0004ff; background: #cccaca; > #borderLeft < border-left: 2px solid #0004ff; position: absolute; top: 50%; bottom: 0; >

Let’s see the result of our code.

Example of limiting the left border:

html> html> head> title>Title of the document title> style> #box < height: 70px; width: 70px; position: relative; border-bottom: 2px solid #0004ff; background: #cccaca; > #borderLeft < border-left: 2px solid #0004ff; position: absolute; top: 50%; bottom: 0; > style> head> body> div id="box"> div id="borderLeft"> div> div> body> html>

Result

Next, we’re going to demonstrate another example, where we limit the border length of four different elements. For that, we use four elements and the :before pseudo-element. To limit the length of the top, bottom, right, and left borders, we use the border-top, border-bottom, border-right, and border-left properties, respectively.

Example of limiting the borders using pseudo-elements:

html> html> head> title>Title of the document title> style> h1 < text-align: center; margin: 50px; color: #000; > div < width: 150px; height: 60px; position: relative; z-index: 1; background-color: #ffff3b; margin: 20px auto; padding: 20px; color: #726E97; > div.top:before < content: ""; position: absolute; left: 0; top: 0; height: 5px; width: 50%; border-top: 3px solid #000; > div.bottom:before < content: ""; position: absolute; left: 25px; bottom: 0; height: 15px; width: 70%; border-bottom: 3px solid #000; > div.left:before < content: ""; position: absolute; left: 0; top: 0; height: 50px; width: 50%; border-left: 3px solid #000; > div.right:before < content: ""; position: absolute; right: 0; top: 0; height: 50px; width: 50%; border-right: 3px solid #000; > style> head> body> h1>Example of limiting border length h1> div class="top"> div> div class="bottom"> div> div class="left"> div> div class="right"> div> body> html>

How about moving the box itself?

If you want to move the box itself around on the page, you can use the position and left / top properties. Here’s an example:

html> html> head> style> .box < width: 300px; height: 200px; border: 1px solid #ccc; border-radius: 7px / 7px; padding: 20px; text-align: center; position: absolute; left: 50px; top: 50px; > style> head> body> div class="box"> h1>Hello, world! h1> p>This is a box with rounded corners. p> div> body> html>

In this example, we have a div element with the class box . We’ve used CSS to set the width, height, border, padding, corner radius, and text alignment of the box, as well as to position it absolutely on the page using the position , left , and top properties. The left property specifies the horizontal position of the box (in this case, 50 pixels from the left edge of the screen), and the top property specifies the vertical position of the box (in this case, 50 pixels from the top edge of the screen).

You can adjust the left and top values to move the box to a different position on the page. For example, if you want the box to be positioned 100 pixels from the left edge of the screen and 200 pixels from the top edge of the screen, you can set the left and top values accordingly:

How about creating a box with rounded corners?

Here’s a full example of how to create a box with rounded corners with a maximum radius of 7 pixels:

html> html> head> style> .box < width: 300px; height: 200px; border: 1px solid #ccc; border-radius: 7px / 7px; padding: 20px; text-align: center; > style> head> body> div class="box"> h1>Hello, world! h1> p>This is a box with rounded corners. p> div> body> html>

In this example, we have a div element with the class box . We’ve used CSS to set the width, height, border, and padding of the box, as well as to set a corner radius of 7 pixels horizontally and vertically. We’ve also centered the text inside the box using the text-align property.

Источник

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-width

The border-bottom-width CSS property sets the width of the bottom border of an element.

Try it

Syntax

/* Keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* Global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: revert; border-bottom-width: revert-layer; border-bottom-width: unset; 

Values

Defines the width of the border, either as an explicit nonnegative or a keyword. If it’s a keyword, it must be one of the following values:

Note: Because the specification doesn’t define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick , and the values are constant within a single document.

Formal definition

Initial value	medium
Applies to	all elements. It also applies to ::first-letter .
Inherited	no
Computed value	the absolute length or 0 if border-bottom-style is none or hidden
Animation type	a length

Formal syntax

Источник

border-bottom¶

Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет нижней границы элемента.

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

Демо¶

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

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

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

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

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

Синтаксис¶

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; 

Значения¶

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

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

Значение по-умолчанию: Зависит от использования

Применяется к: Ко всем элементам

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

 html> head> meta charset="utf-8" /> title>border-bottomtitle> style> .panel  background: #ccc; /* Цвет фона */ > .panel p.content  padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ border-top: 2px dotted white; /* Параметры линии вверху */ > .panel p.title  font-family: sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ background: maroon; /* Цвет фона */ color: white; /* Цвет текста */ border-bottom: 2px solid white; /* Параметры линии внизу */ > style> head> body> div class="panel"> p class="title"> Резкий базовый тип личности глазами современников p> p class="content"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако пародия многопланово заканчивает общекультурный цикл. p> div> body> html> 

Ссылки¶

Источник