свойство border-right-style
Свойство border-right-style определяет стиль правой границы блока. Стиль правой границы рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit.
Доступные стили:
Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. border-style — примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.
Специфические стили:
Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.
CSS border-right-style property
border-right-style property
CSS border-right-style property sets the style of the line of a box’s right border.
Syntax:
Values
style: Style of the right border of a box. The following table shows the values:
value | Description |
---|---|
none | No style is set. The width of the border is zero. |
hidden | No style is set. The width of the border is zero, except border of table elements (e.g. td, tr). |
dotted | Border is a chain of dots. |
dashed | Border is a chain of small dashes. |
solid | The border is made up of a single line segment. |
double | The border is made up of a two line segments. In this case, the width of the border is calculated by summing up the width of the lines and the space between two lines. |
groove | As if the border is carved. |
ridge | As if the border is coming out of the medium on which it is displayed. |
inset | As if the box is embedded. |
inset | As if the box is carved. |
inherit : If set, the associated element takes computed value of its parent element’s border-right-style property.
Initial value
Applies to
border-right-style property can be applied to all HTML elements.
Inherited
Percentages
Media
Computed value
Browser compatibility
Browser | Version |
---|---|
Internet Explorer | 4.0 and above |
Firefox (Gecko) | 1.0 and above |
Opera | 3.5 and above |
Safari (WebKit) | 1.0 and above |
Example of border-right-style property
CSS border-right Свойство
Пример
Задайте стиль правой границы для различных элементов:
h1 <
border-right: 5px solid red;
>
h2 <
border-right: 4px dotted blue;
>
div <
border-right: double;
>
Определение и использование
border-right Краткое свойство задает все свойства правой границы в одном объявлении.
Свойства, которые могут быть заданы, должны быть в следующем порядке:
Если граница-правый-цвет опущен, цвет будет применяться цвет текста.
Значение по умолчанию: | medium none color |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.borderRight=»5px dotted blue» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
CSS html tables left and right border
I’m trying to write some CSS that will make it so my html table only has borders horizontally, and no borders vertically in between columns.
Here is what I have so far:
This results in a table with white borders on all sides. Any ideas what I’m doing wrong?
EDIT I can get it to do what I want here: http://jsfiddle.net/QZwt5/26/ but when I take this exact table, and exact css into dreamweaver and then ftp to my server I am still getting thin white lines in-between each cell. image http://img267.imageshack.us/img267/9135/temppb.jpg
Also just noticed that if I turn off normalized in fiddle that the borders appear on the table there.
Everything is running on an Ubuntu server, I’m building it in winXP and then ftp to Apache, so there might be some permission problems interfering with the CSS?
CSS: border-right property
This CSS tutorial explains how to use the CSS property called border-right with syntax and examples.
Description
The CSS border-right property defines the width, line style, and color of the right border of a box. It is a shorthand property for setting the border-right-width, border-right-style, and border-right-color CSS properties.
Syntax
The syntax for the border-right CSS property is:
Parameters or Arguments
border-right-width is the right border width of a box and can be one of the following:
(If border-right-width is not provided, the default is medium)
Value | Description |
---|---|
fixed | Fixed value expressed in px, em, . div |
thin | Thin border-right width, which might be 1px or 2px depending on the browser div |
medium | Medium border-right width, which might be 3px or 4px depending on the browser div |
thick | Thick border-right width, which might be 5px or 6px depending on the browser div |
border-right-style is the line style of the right border of a box and can be one of the following:
(If border-right-style is not provided, the default is none)
Value | Description |
---|---|
none | No border-right (This is the default) div |
solid | Single, straight, solid line div |
dotted | Series of dots div |
dashed | Series of short dashes div |
double | Two straight lines that total the pixel amount defined by border-right-width div |
groove | Carved effect div |
ridge | 3D appearance where border-right looks like it is «coming out» (opposite of groove) div |
inset | Embedded appearance div |
outset | Embossed appearance (opposite of inset) div |
hidden | Border is hidden div |
inherit | Element will inherit the border-right-style from its parent element div |
border-right-color is the color of the right border of a box and can be one of the following:
Value | Description |
---|---|
#RRGGBB | Hexadecimal representation of the border-right-color div |
rgb() | RGB representation of the border-right-color div |
name | Name of the border-right-color (ie: red, blue, black, white) div |
transparent | Border is not displayed but still takes up space on the page div |
inherit | Element will inherit the border-right-color from its parent element div |
- When using the border-right property, you can provide one or all of the values (border-right-width, border-right-style, and border-right-width values) and they can be provided in any order.
- You must provide a value for the border-right-style for the right border to appear.
- See also the border-right-color, border-right-style, and border-right-width properties.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
Browser Compatibility
The CSS border-right property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the border-right property below, exploring examples of how to use this property in CSS.
In this CSS border-right example, we have set the line style of the right border of the
Next, we’ll look at a CSS border-right example where we provide the border-right-width, border-right-style, and border-right-color values.
In this CSS border-right example, we have set the border-right-width to 3px, the border-right-style to solid, and the border-right-color to blue.
We could rewrite this example using the hexadecimal value for blue as follows:
Or we could rewrite this example using the rgb() value for blue as follows:
border-right
Поддержка браузеров
IE | Opera | Chrome | Firefox | Safari |
---|---|---|---|---|
IE до 7.0 (включ.) не поддерживает значение inherit | + | + | + | + |
Пример
Задаем стиль для правой границы:
Описание и использование
Свойство border-right объединяет в себе все свойства, которые используются для определения правой границы (рамки) элемента.
Свойства, которые можно задать (по порядку): border-right-width, border-right-style, and border-right-color.
Любое из свойств может отсутствовать, если это необходимо. Кроме этого, порядок свойств может быть изменен. Браузер сам определит, какое из них соответствует нужному атрибуту.
свойство border-right-styleCSS3-генератор ☛
Устанавливает стиль границы справа от элемента.
Краткая информация
Значение по умолчанию | Нет |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис ?
Обозначения
Описание | Пример | |
---|---|---|
Указывает тип значения. | ||
A && B | Значения должны выводиться в указанном порядке. | && |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [, ]* |
+ | Повторять один или больше раз. | + |
? | Указанный тип, слово или группа не является обязательным. | inset? |
Повторять не менее A, но не более B раз. | ||
# | Повторять один или больше раз через запятую. | # |
Значения
Вид указанных стилей представлен на рис. 1.
Рис.1. Стили границ
Пример
Объектная модель
Примечание
Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Спецификация ?
Спецификация | Статус |
---|---|
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация |
CSS Level 2 (Revision 1) | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры: Настольные Мобильные ?
Internet Explorer | Chrome | Opera | Safari | Firefox | |
4 | 7 | 1 | 3.5 | 1 | 1 |
Android | Firefox Mobile | Opera Mobile | Safari Mobile |
1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Все о свойстве 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 к тексту:
Еще один пример нестандартного использования границ:
Как сделать бордюр или рамку вокруг элемента HTML, CSS свойство border
Очень часто при разработке сайтов бывает необходимо на какой-либо странице размещать элементы, которые должны иметь бордюры или рамки. Эту задачу можно решить при помощи специального CSS свойства – border. Оно позволяет не только задать бордюр, но и гибко настроить его.
Свойство CSS border является универсальным, это значит, что оно содержит различные другие свойства с префиксом border. Значения в свойстве border можно указать в любом порядке через пробел.
Какие есть CSS свойства из семейства border? Список приводится ниже:
- border-bottom — управляет отображением только нижнего бордюра;
- border-bottom-color – задает цвет нижнего бордюра;
- border-bottom-left-radius — задает радиус скругления нижнего левого угла бордюра;
- border-bottom-right-radius — задает радиус скругления нижнего правого угла бордюра;
- border-bottom-style – задает стиль отображения нижнего бордюра;
- border-bottom-width – задает ширину нижнего бордюра;
- border-collapse — задает, как отображать границы вокруг ячеек таблицы, значения: collapse, separate, inherit;
- border-color – задает цвет бордюра;
- border-image – позволяет задать рисунок в качестве фона бордюра;
- 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-spacing — устанавливает расстояние между границами ячеек в таблице;
- border-style – задает стиль отображения бордюра, значения: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit;
- border-top — управляет отображением только верхнего бордюра;
- border-top-color — задает цвет верхнего бордюра;
- border-top-left-radius — задает радиус скругления верхнего левого угла бордюра;
- border-top-right-radius — задает радиус скругления верхнего правого угла бордюра;
- border-top-style — задает стиль отображения верхнего бордюра;
- border-top-width — задает ширину верхнего бордюра;
- border-width – задает ширину бордюра.
Как видно, список свойств достаточно большой, но можно пользоваться данным справочником, чтобы знать, как правильно применять данные свойства при разработке.
border-right-w >
Свойство CSS border-right-width используется для изменения толщины правой части рамки элемента (правой границы).
Для создания рамки сразу со всех сторон элемента можно использовать свойство border-width, а если для всех сторон задана одинаковая толщина, то border.
Тип свойства
Применяется: ко всем элементам.
Значения
Значением свойства border-right-width является указание толщины правой стороны рамки в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения недопустимы. Также значениями могут быть следующие ключевые слова:
- thin — Тонкая рамка.
- medium — Средняя рамка.
- thick — Толстая рамка.
- inherit — наследует значение border-right-width от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: medium.
Синтаксис
Пример CSS: использование border-right-width
Результат. Использование свойства CSS border-right-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 .