11.4 C
Москва
16.10.2026

36

Как задать длину border css

Изменить высоту border

Как я могу регулировать высоту, например правого border , если меня не устраивает его автоматическое покрытие всего контента в блоке? border-image ? тогда подскажите как мне сделать border-image только для определенной стороны, заранее благодарю.

Отслеживать
задан 28 июл 2016 в 1:46
665 1 1 золотой знак 8 8 серебряных знаков 25 25 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вот пример с border-image для одной (нижней) стороны

body < margin: 0; padding: 10px; >div < background-color: #e2e2e2; border: solid transparent; border-width: 0 0 20px; border-image:url("https://thumbs.dreamstime.com/x/love-line-colorful-drawing-vertical-seamless-pattern-illustration-lines-background-graphic-texture-wallpaper-64879256.jpg") 2 repeat; >

Отслеживать
ответ дан 28 июл 2016 в 2:45
4,599 2 2 золотых знака 15 15 серебряных знаков 29 29 бронзовых знаков

Для задания border только одной из сторон используются свойства:

  • border-top верхний
  • border-bottom нижний
  • border-left левый
  • border-right правый

Толщину border можно задавать через border-width или прямо в border вторым значением.

div 100x100

Длина рамки CSS

Как сделать рамку длиннее или наоборот?

Отслеживать

51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков

задан 21 мар 2012 в 14:34

190 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков

Рамка не может быть длиннее или короче. Вообще нельзя влиять на рамку ее свойствами. Она зависит от размеров элемента, вокруг которого она строится. И, как вам уже подсказали, это можно сделать изменением размеров элемента или его внутренними отступами

border-width

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

Синтаксис

border-width: [значение | thin | medium | thick] | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведен в табл. 1.

Табл. 1. Зависимость результата от числа значений

Число значений Результат
1 Толщина границы будет установлена для всех сторон элемента.
2 Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.
3 Первое значение задает толщину верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

Применение свойства border-width

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

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

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

Браузеры

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

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

Толщина границы при использовании ключевых слов thin , medium и thick в разных браузерах может несколько различаться.

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

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

Поля

Читать:
Как разобрать ключ chevrolet cruze

Анимация

Градиент

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

Изображения

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

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

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

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

Размеры

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

Границы

Цвет и фон

Селекторы

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

border-width

CSS-свойство border-width определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства border .

  • border-top-width (en-US): medium
  • border-right-width (en-US): medium
  • border-bottom-width (en-US): medium
  • border-left-width (en-US): medium
  • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
  • border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
  • border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
  • border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
  • border-bottom-width (en-US): длина
  • border-left-width (en-US): длина
  • border-right-width (en-US): длина
  • border-top-width (en-US): длина

Синтаксис

border-width =
(en-US)

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

border-width: ширина /* Одно значение */ border-width: вертикальная горизонтальная /* Два значения */ border-width: верх горизонтальная основание /* Три значения */ border-width: верх право основание лево /* Четыре значения */ border-width: inherit /* Родительское значение */

Values

    • : Is either a non-negative explicit value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values: thin A thin border
      medium A medium border
      thick A thick border The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.
    • : Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

    Examples

    A mix of values and lengths

    HTML
    p id="sval">one value: 6px wide border on all 4 sidesp> p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border p> p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left p> p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em right p>
    CSS
    #sval  border: ridge #ccc; border-width: 6px; > #bival  border: solid red; border-width: 2px 10px; > #treval  border: dotted orange; border-width: 0.3em 0 9px; > #fourval  border: solid lightgreen; border-width: thin medium thick 1em; > p  width: auto; margin: 0.25em; padding: 0.25em; >
    Result

    Specifications

    Specification
    CSS Backgrounds and Borders Module Level 3
    # the-border-width

    Browser compatibility

    BCD tables only load in the browser

    See also

    • The border-related shorthand properties: border , border-style (en-US), border-color (en-US)
    • The border-width-related properties: border-bottom-width (en-US), border-left-width (en-US), border-right-width (en-US), border-top-width (en-US)

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 11 окт. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    • Product help
    • Report an issue

    Our communities

    Developers

    • Web Technologies
    • Learn Web Development
    • MDN Plus
    • Hacks Blog
    • Website Privacy Notice
    • Cookies
    • Legal
    • Community Participation Guidelines

    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.

Похожие записи

Как подключить php файл

admin

Для чего нужна dio bone в autocad

admin

Сколько идет отжим в стиральной машине

admin