border-right в CSS

свойство 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.



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.




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:»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: 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

Илон Маск рекомендует:  Создание таблицы

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.


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.


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, .
thin Thin border-right width, which might be 1px or 2px depending on the browser
medium Medium border-right width, which might be 3px or 4px depending on the browser
thick Thick border-right width, which might be 5px or 6px depending on the browser

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)
solid Single, straight, solid line
dotted Series of dots
dashed Series of short dashes
double Two straight lines that total the pixel amount defined by border-right-width
groove Carved effect
ridge 3D appearance where border-right looks like it is «coming out» (opposite of groove)
inset Embedded appearance
outset Embossed appearance (opposite of inset)
hidden Border is hidden
inherit Element will inherit the border-right-style from its parent element

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
rgb() RGB representation of the border-right-color
name Name of the border-right-color (ie: red, blue, black, white)
transparent Border is not displayed but still takes up space on the page
inherit Element will inherit the border-right-color from its parent element
  • 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


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:


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

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

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

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

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

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

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


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

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


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

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


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

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


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

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

К параметру 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 .

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