border-width в CSS


border-w >

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

Если толщина рамки со всех сторон одинаковая, то можно использовать свойство border.

Тип свойства

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

Значения

Значением свойства border-width является указание толщины каждой части рамки в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения недопустимы. Также значениями могут быть следующие ключевые слова:

  • thin — Тонкая рамка.
  • medium — Средняя рамка.
  • thick — Толстая рамка.
  • inherit — наследует значение border-width от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: medium.

Border-width может иметь от одного до четырех (через пробел) значений толщины, при этом будут соблюдаться данные правила:

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

Синтаксис

Пример CSS: использование border-width

Результат. Использование свойства CSS border-width.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

CSS свойство border-w >

Это свойство определяет толщину всех четырех сторон рамки HTML элемента. Свойство border-width может принимать от одного до четырех значений.

  • border-width: thin medium thick 10px;
    • тонкая верхняя сторона рамки (thin)
    • правая сторона рамки средней толщины (medium)
    • толстая нижняя сторона рамки (thick)
    • толщина левой стороны рамки 10px
  • border-width: thin medium thick;
    • тонкая верхняя сторона рамки состоит из точек (thin)
    • правая и левая стороны рамки средней толщины (medium)
    • толстая нижняя сторона рамки (thick)
  • border-width: thin medium;
    • тонкие верхняя и нижняя стороны рамки (thin)
    • правая и левая стороны рамки средней толщины (medium)
  • border-width: thin;
    • все четыре стороны рамки тонкие (thin)

Внимание: Следует всегда определять свойство border-style перед свойством border-width. Элемент должен иметь рамку, прежде чем менять ее толщину.

CSS синтаксис

Возможные значения

Значение Описание
medium Значение по умолчанию. Средняя толщина рамки.
thin Тонкая рамка.
thick Толстая рамка.
толщина Позволяет устанавливать толщину рамки в единицах CSS (например, в px).
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Пример

Устанавливаем толщину для всех четырех сторон рамки параграфа

border-w > IE Opera Chrome Firefox Safari IE до 7.0 (включ.) не поддерживает значение inherit и hidden + + + +

Пример

Задаем ширину для четырех границ:

Описание и использование

Свойство border-width задает ширину для четырех границ. Это свойство может иметь от одного до четырех значений.

Примеры:

* border-width:thin medium thick 10px; — верхняя граница тонкая — правая граница средняя — нижняя граница толстая — левая граница 10 пикселей

* border-width:thin medium thick; — верхняя граница тонкая — правая и левая границы средние — нижняя граница толстая

* border-width:thin medium; — верхняя и нижняя границы тонкие — правая и левая границы средние

* border-width:thin; — все четыре границы тонкие

Примечание: Всегда прописывайте свойство border-style перед свойством border-width. У элемента должна быть граница, прежде чем менять ее ширину.

CSS свойство border-width

CSS свойство border-width устанавливает толщину всех границ элемента.

Свойство имеет четыре значения. При использовании только одного из них border-width применяется для всех сторон элемента (top, right, bottom, left ). Это сокращенное свойство, которое устанавливает border-top-w >border-bottom-width .

При использовании двух значений первое из них применяется для верхней и нижней стороны элемента. А второе значение применяется для левой и правой стороны элемента. При использовании трех значений первое значение применяется для верхней стороны. Второе значение применяется для правой и левой стороны. Третье значение применяется для нижней стороны элемента.

При использовании четырех значений первое из них применяется для верхней стороны элемента, а второе для правой стороны Третье значение применяется для нижней стороны элемента и четвертое для левой стороны элемента.

Сначала необходимо установить свойство border-style, а потом border-width. Элемент должен иметь границы, чтобы суметь определить толщину

Значение по умолчанию medium
Наследуется Нет
Анимируемое Да. Толщина границы анимируема.
Версия CSS1
DOM синтаксис object.style.borderW ;

Синтаксис

Пример

Рассмотрим второй пример, который содержит три значения:

CSS. Как задать border-w > Задать вопрос

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

Адаптирую css стиль под свои потребности: необходимо задать border-width в 50% от ширины родительского элемента

Изначально стиль был с захардкоженым значением ширины и высоты, выглядел как то так:

Начал уходить от хардкод-значений:

Осталось задать border-width у hover эффекта в 50% от ширины всего контейнера

Попробовал вот так:

Естественно ничего не получилось. Как тут привязаться к ширине родителя не понимаю.

Тоесть нужно сделать как то так

Позволяет ли css подобную запись? Заранее спасибо.

Все о свойстве border

Основы

Всем знакомо такое использование:

Это однопиксельная сплошная рамка. Немного меняем синтаксис:

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Но так это реализовать проще и правильнее:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

А вот как можно нарисовать лимон средствами CSS:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

Или более подробно:

Outline

Самый популярный способ создания двойной границы — это параметр outline:

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

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

Можно использовать такую конструкцию:

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Еще один способ, с применением теней:

Изменение углов

К параметру border-radius можно применять два значения, используя «/», например:

Это то же самое, что:

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

CSS фигуры

В следующих примерах предполагается такая разметка:

И такой базовый css:

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

Или то же самое:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Наша базовая разметка:

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

Еще один пример нестандартного использования границ:

Свойство CSS border-width

p
<
border-style:solid;
border-width:15px;
>

Описание и использование

Свойство CSS border-width задает ширину всех четырех бордюров элемента. Свойство может иметь от одного до четырех значений:

  • border-w >thin medium thick 10px;
    • верхняя граница тонкая
    • правая граница средней толщины
    • нижняя граница толстая
    • левая граница толщиной 10px

  • border-w >thin medium thick;
    • верхняя граница тонкая
    • правая и левая границы средней толщины
    • нижняя траница толстая

  • border-w >thin medium;
    • верхняя и нижняя границы тонкие
    • правая и левая границы средней толщины

  • border-w >thin;
    • все границы тонкие

Заметка: для облегчения запоминания порядка окрашивания бордюров можно запомнить два простых правила:

  1. Бордюры нумеруются с верхнего по часовой стрелки
  2. Вертикальные бордюры имеют приоритет перед горизонтальными, т.е. если указано три цвета, два вертикальных имеют свои цвета, а левый бордюр получает цвет от правого.

Заметка: всегда задавайте свойство border-style перед свойством border-width. Элемент должен иметь бордюры, для которых вы хотите изменить ширину.

Значение по умолчанию medium
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderW

Поддержка в браузерах

Свойство border-width поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

CSS border-w >on Mar 14, 2020

The border-width properties specify the width of the border area of an element.

CSS property border-w > CSS version: CSS 2.1 Value: [thin|medium|thick|length] <1,4>| inherit Initial: medium (individual properties) Applies to: all elements Inherited: no

Few points to note:

  1. When four values are specified this is the order:
  2. When less than four values are specified:

  • border-style must be set to something other than none for border-width to be applicable.
  • CSS border-width Свойство

    Пример

    Задайте ширину границ:

    Подробнее примеры ниже.

    Определение и использование

    Свойство border-width задает ширину четырех границ элемента. Это свойство может иметь от одного до четырех значений.

    • border-width: thin medium thick 10px;
      • top border is thin
      • right border is medium
      • bottom border is thick
      • left border is 10px

    • border-width: thin medium thick;
      • top border is thin
      • right and left borders are medium
      • bottom border is thick

    • border-width: thin medium;
      • top and bottom borders are thin
      • right and left borders are medium

    • border-width: thin;
      • all four borders are thin

    Примечание: Всегда объявляйте свойство border-style перед border-width свойством. Элемент должен иметь границы, прежде чем можно задать ширину.

    Значение по умолчанию: medium
    Inherited: no
    Animatable: yes. Читайте о animatable
    Version: CSS1
    Синтаксис JavaScript: object.style.borderW

    Поддержка браузера

    Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

    Свойство border: границы для блоков

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

    Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

    Border-width: ширина границы

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

    Кроме этого, существуют ключевые слова для обозначения ширины границы:

    • thin — граница шириной 2px;
    • medium — граница шириной 4px;
    • thick — граница шириной 6px.

    Border-color: цвет границы

    Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB — зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

    Также можно задать прозрачный цвет, записав:

    Border-style: стиль границы

    Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную — существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

    • solid — сплошная граница;
    • dotted — граница из точек;
    • dashed — пунктирная граница;
    • double — двойная граница;
    • groove — объемная граница-выемка;
    • ridge — объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
    • outset — выдавленная граница;
    • inset — вдавленная граница (по сути, инверсия предыдущего стиля).

    Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль — например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую — двойными. Здесь уже все зависит лишь от фантазии.

    Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

    Общее CSS-свойство border: 3 в 1

    Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:

    Границы для отдельных сторон

    При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

    • border-top — стиль для верхней границы;
    • border-right — для правой границы;
    • border-bottom — для нижней границы;
    • border-left — для левой границы.

    Итоги

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

    Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:

    Но это слишком длинная запись. Всё это можно записать короче:

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

    Мини-задание

    Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

    • Верхнюю и нижнюю границы сделайте сплошными solid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
    • Левую границу сделайте пунктирной dashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
    • Правую границу сделайте двойной double , шириной 7 пикселей, цвет отличный от двух предыдущих.

    В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):

    Илон Маск рекомендует:  Что такое код ora_error
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL