Учебники

CSS – Границы

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

  • Цвет границы определяет цвет границы.

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

  • Border-width определяет ширину границы.

Цвет границы определяет цвет границы.

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

Border-width определяет ширину границы.

Теперь мы увидим, как использовать эти свойства на примерах.

Свойство границы цвета

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

  • border-bottom-color меняет цвет нижней границы.

  • border-top-color меняет цвет верхней границы.

  • border-left-color меняет цвет левой границы.

  • border-right-color меняет цвет правой границы.

border-bottom-color меняет цвет нижней границы.

border-top-color меняет цвет верхней границы.

border-left-color меняет цвет левой границы.

border-right-color меняет цвет правой границы.

В следующем примере показано влияние всех этих свойств —

Live Demo

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html> 

Это даст следующий результат —

Недвижимость в стиле границы

Свойство border-style позволяет вам выбрать один из следующих стилей рамки:

  • нет — нет границы. (Эквивалент ширины границы: 0;)

  • сплошная — граница представляет собой одну сплошную линию.

  • пунктир — граница представляет собой серию точек.

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

  • двойная — граница это две сплошные линии.

  • углубление — граница выглядит так, как будто она вырезана на странице.

  • Гребень — граница выглядит противоположно канавке.

  • вставка — граница делает окно таким, как будто оно встроено в страницу.

  • outset — Border делает окно таким, как будто оно выходит из холста.

  • hidden — То же, что и none, кроме как с точки зрения разрешения конфликтов границ для элементов таблицы.

нет — нет границы. (Эквивалент ширины границы: 0;)

сплошная — граница представляет собой одну сплошную линию.

пунктир — граница представляет собой серию точек.

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

двойная — граница это две сплошные линии.

углубление — граница выглядит так, как будто она вырезана на странице.

Гребень — граница выглядит противоположно канавке.

вставка — граница делает окно таким, как будто оно встроено в страницу.

outset — Border делает окно таким, как будто оно выходит из холста.

hidden — То же, что и none, кроме как с точки зрения разрешения конфликтов границ для элементов таблицы.

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

  • border-bottom-style меняет стиль нижней границы.

  • стиль верхней границы меняет стиль верхней границы.

  • border-left-style меняет стиль левой границы.

  • border-right-style меняет стиль правой границы.

border-bottom-style меняет стиль нижней границы.

стиль верхней границы меняет стиль верхней границы.

border-left-style меняет стиль левой границы.

border-right-style меняет стиль правой границы.

В следующем примере показаны все эти стили границ —

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

Это даст следующий результат —

Свойство border-width

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

Вы можете индивидуально изменить ширину нижней, верхней, левой и правой границ элемента, используя следующие свойства:

  • border-bottom-width меняет ширину нижней границы.

  • border-top-width меняет ширину верхней границы.

  • border-left-width меняет ширину левой границы.

  • border-right-width меняет ширину правой границы.

border-bottom-width меняет ширину нижней границы.

border-top-width меняет ширину верхней границы.

border-left-width меняет ширину левой границы.

border-right-width меняет ширину правой границы.

В следующем примере показаны все эти ширины границы —

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html> 

Это даст следующий результат —

Свойства границы, используя Сокращения

Свойство border позволяет вам указать цвет, стиль и ширину линий в одном свойстве —

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

Live Demo

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

Это даст следующий результат —