Свойства границы позволяют указать, как должна выглядеть граница рамки, представляющей элемент. Есть три свойства границы, которые вы можете изменить:
-
Цвет границы определяет цвет границы.
-
Стиль границы указывает, должна ли быть сплошная граница, пунктирная линия, двойная линия или одно из других возможных значений.
-
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 меняет цвет правой границы.
В следующем примере показано влияние всех этих свойств —
<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 меняет стиль правой границы.
В следующем примере показаны все эти стили границ —
<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 меняет ширину правой границы.
В следующем примере показаны все эти ширины границы —
<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 позволяет вам указать цвет, стиль и ширину линий в одном свойстве —
В следующем примере показано, как использовать все три свойства в одном свойстве. Это наиболее часто используемое свойство для установки границы вокруг любого элемента.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>
Это даст следующий результат —