Как сделать border короче css

border-bottom

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

Синтаксис

Значения

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

Рис.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 .

CSS — как сделать линию короче бокса

При верстке макета сайта, кстати, совсем несложного, возник вопрос.

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

border-bottom

border-right

border-right

border

Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.

:after

Создаем слой с контентом:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

И пропишем для него стилевые правила:

:after

div:after  content: ""; position: absolute; top: 30px; right: -10px; bottom: 30px; border-left: 1px solid #000; >

Немного распишем, что да как в этом коде.

CSS — Урок 9. Свойства — margin, padding, border

Сегодня мы будем учиться задавать свойства блоков. И делать это мы будем на примерах элементов div и span. div — этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами. Элемент span, в отличии от div, создает строчный блок.

Посмотрим на примере, создайте html-страницу со следующим кодом:

Заголовок документа

Это текст в тегах div с .

Это текст в тегах div с .

Это текст в тегах div с .

Изменить длину border-bottom

Нужно сделать нижнюю границу border-bottom не на всё длину текста, а только процентов на 40 и по центру, как на скриншоте, подскажите пожалуйста.

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?Чет.

Border-top и border-bottom сделать шарами
здравствуйте, не могу сделать границы рамки шарами, т.е. border-bottom: 15px dotted black; — будут.

Двойной border-bottom
Создаю, 2 тему, извиняюсь, как сделать чтобы border был, на блоке div, и под текстом, к примеру.

border-bottom не работает
Здравствуйте! У меня почему-то не хочет отображать border-bottom, я его к чему хочешь применял.

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,857
Записей в блоге: 11

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

 html lang="en"> head> meta charset="UTF-8"> title>Document/title> style> .widget-title < text-align:center >.widget-title div < width:20%; display:inline-block; border-bottom:2px solid >/style> /head> body> div class="widget-title"> div>Текст/div> /div> /body> /html>