Граница CSS - httpdoc.ru

CSS Границы

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

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

  • Стиль границы
  • Цвет границы
  • Ширина рамки
  • Граничный радиус

Стиль границы

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

Ценить Описание
никто На нем нет границы.
пунктирный Он показывает пунктирную границу.
пунктирная Он показывает пунктирную границу.
твердый Он показывает сплошную границу.
двойной Он показывает две границы одинаковой ширины.
канавка Он отображает трехмерную рифленую рамку.
гребень Он отображает трехмерную границу с ребрами. .
вставка Он отображает трехмерную рамку-вставку.
начало Он отображает трехмерную начальную границу.
скрытый Он определяет скрытую границу. Эта граница существует, но не отображается.

border-style Свойство может быть отдельно для каждой стороны элемента: border-top , border-right , border-bottom и border-left . Он также может быть задан сокращенным свойством, например, border-style: double solid dashed dotted; для верхней, правой, нижней и левой границ соответственно.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Border </title> 
  <meta charset="UTF-8"> 

<style>
 .dotted {border-style: dotted;}
 .dashed {border-style: dashed;}
 .solid {border-style: solid;}
 .double {border-style: double;}
 .groove {border-style: groove;}
 .ridge {border-style: ridge;}
 .inset {border-style: inset;}
 .outset {border-style: outset;}
 .none {border-style: none;}
 .hidden {border-style: hidden;}
</style>
</head>

<body>
 <p class="dotted">A dotted border.</p>
 <p class="dashed">A dashed border.</p>
 <p class="solid">A solid border.</p>
 <p class="double">A double border.</p>
 <p class="groove">A groove border.</p>
 <p class="ridge">A ridge border.</p>
 <p class="inset">An inset border.</p>
 <p class="outset">An outset border.</p>
 <p class="none">No border.</p>
 <p class="hidden">A hidden border.</p>
</body>
</html>

Выход

CSS Border

Пунктирная граница.

Пунктирная граница.

Сплошная граница.

Двойная граница.

Кайма паза.

Кайма хребта.

Вставка-бордюр.

Начальная граница.

Без границ.


Цвет границы

Цвет можно указать тремя способами:

  • Имя: Непосредственно указывается название цвета. Например: "blue" .
  • Hex: дано шестнадцатеричное значение цвета. Например: "#fff256" .
  • RGB: указывается значение RGB для цвета. Например: "rgb(170,255,100)" .
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Border Color </title> 
  <meta charset="UTF-8">  
<style>  
.color1 {  
    border-style: solid;  
    border-color: red blue yellow green;  
}  
.color2 {  
    border-style: solid;  
    border-color: #98bf21 yellow orange brown;  
}   
</style>  
</head>  
<body>  
<p class="color1">This is a solid red border</p>  
<p class="color2">This is a solid green border</p>  
</body>  
</html>

Выход

CSS Border Color

Это сплошная красная граница

Это сплошная зеленая граница


Ширина рамки

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

Он также может быть задан сокращенным свойством, например, border-width: 1px 5px 4px 5px; для верхней, правой, нижней и левой границ соответственно.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Border Width </title> 
  <meta charset="UTF-8"> 
<style>  
.width1 {  
    border-style: solid;  
    border-width: medium;
    padding: 5px;  
}  
.width2 {  
    border-style: solid;  
    border-width: 5px;  
    padding: 5px;
}  
width3 {  
    border-style: solid;  
    border-width: 2px;  
    padding: 5px;
}  
</style>  
</head>  
<body>  
<p class="width1">Write here.</p>  
<p class="width2">Write here.</p>  
<p class="width3">Write here.</p>  
</body>  
</html>

Выход

CSS Border Width

Пишите здесь.

Пишите здесь.

Пишите здесь.