CSS | свойство border-right-style

Опубликовано: 5 Января, 2022

Свойство border-right-style в CSS используется для изменения внешнего вида правого линейного сегмента границы элемента.

Синтаксис:

 border-right-style: нет | скрытый | пунктирный | пунктирный | сплошной | двойной | канавка |
гребень | вставка | начало | наследование;

Стоимость недвижимости:
none: это значение по умолчанию, оно делает ширину правой границы равной нулю. Следовательно, это не видно.

Синтаксис:

 граница-правый-стиль: нет;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                border: 5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style: none;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:none; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

hidden: используется, чтобы сделать правую границу невидимой, как none , за исключением случая разрешения конфликта границ элементов таблицы.

Синтаксис:

 граница-правый-стиль: скрытый;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                border: 5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style: hidden;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:hidden; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

dotted: используется для создания правой границы из ряда точек.

Синтаксис:

 граница-правый-стиль: пунктирная;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                border: 5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style: dotted;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:dotted; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

пунктирная: образует правую границу с серией коротких отрезков линии.

Синтаксис:

 граница-правый-стиль: пунктирная;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                border: 5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style: dashed;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:dashed; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

solid: используется для создания правой границы из одного сегмента сплошной линии.

Синтаксис:

 граница-правый-стиль: сплошной;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                border: 5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style: solid;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:solid; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

double: это свойство делает правую границу двойной сплошной линией. Ширина границы в этом случае равна сумме ширины двухстрочных сегментов и расстояния между ними.

Синтаксис:

 граница-правый-стиль: двойной;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                border: 5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style: double;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:double; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

канавка: делает правую границу рифленым линейным сегментом, что заставляет нас чувствовать, что он идет внутрь.

Синтаксис:

 граница-правый-стиль: канавка;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                border: 10px;
                border-style: solid;
                 
                /* CSS Property for border-right-style */
                border-right-style: groove;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:groove; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

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

Синтаксис:

 граница-правый-стиль: вставка;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                border: 10px;
                border-style: solid;
                 
                /* CSS Property for border-right-style */
                border-right-style: inset;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:inset; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

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

Синтаксис:

 граница-правый-стиль: начало;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                border: 10px;
                border-style: solid;
                 
                /* CSS Property for border-right-style */
                border-right-style: outset;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- border-right-style:outset; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

Наследовать: наследует свойство стиля правой границы от родительского элемента.

Синтаксис:

 граница-правый-стиль: наследование;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS border-right-style Property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            body {
                border-right-style: dashed;
            }
            h1 {
                color: green;
                text-align: center;
                border: 5px solid black;
         
                /* CSS Property | border-right-style */
                border-right-style: inherit;
            }
        </ style >
    </ head >
     
    < body >
        <!-- border-right-style: inherit; -->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

Поддерживаемые браузеры: браузеры, поддерживаемые свойством border-right-style , перечислены ниже:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Safari 1.0

Technical Scripter Picked CSS

CSS | свойство border-right-style

РЕКОМЕНДУЕМЫЕ СТАТЬИ