Блог Тимура Казанского

Границы в CSS


Всем привет! В данной статье хотел бы затронуть такую тему, как границы в CSS, из которой вы узнаете о 8-ми стилях границ, как применять цвета к границам, задавать ширину или толщину, а также мы с вами разберем, как сделать углы границ овальными и закругленными. Ну что ж, поехали…

отступы и поля в css

Стили границ

И так, для того чтобы указать границу вокруг области содержимого, первое что нужно сделать, это объявить стиль границы (border-style), иначе согласно спецификации CSS, без ее указания, она просто не будет существовать. Далее для свойства border-style указываем одно из 8-ми значений стиля, ниже для наглядности представлены все восемь значений:

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

8 стилей границ в css

Но, если вам нужно указать разные границы вокруг области содержимого, то, либо вы можете воспользоваться не сокращенным свойством border-style, а именно:

<style>
.primer {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}
</style>

либо же сокращенным свойством border-style. Как я уже писал в прошлой статье, отображение значений работает по часовой стрелке, начиная с верхней стороны и заканчивая левой. Посмотрите на следующий пример, где вместо 4-х строчек кода мы уместились всего в одну:

<style>
.primer {
border-style: solid double dotted dashed;
}
</style>

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

Ширина (толщина) границы

Также вы можете задать толщину или ширину границы, воспользовавшись свойством border-width, которое имеет 3 значения: thin (от англ. тонкий) – тонкая граница, medium (от англ. средний) - средняя толщина границы, thick (от англ. толстый) – жирная толщина границы, или же можете установить толщину границы в пикселях, самостоятельно.

Давайте посмотрим на пример:

<style>
.primer {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 10px;
}
</style>

Также вы можете воспользоваться сокращенным свойством border-style:

<style>
.primer {
border-style: solid;
border-width: thin medium thick 10px;
}
</style>

Толщина границы css

Цвет границы

Цвет границы вы можете задать с помощью свойства border-color, также как и в случаях с толщиной границы и стилем, существует сокращенный вариант данного свойства, а именно:

<style>
.primer {
border-style: solid;
border-color: green blue pink red;
}
</style>

Или вы можете указать отдельное свойство для каждой стороны границы:

<style>
.primer {
border-style: solid;
border-top-color: green;
border-right-color: blue;
border-bottom-color: pink;
border-left-color: red;
background-color: yellow;
}
</style>

Цвет границы css

Закругление углов

Чтобы сделать углы границ закругленными, воспользуемся свойством border-radius с указанием размера закругления в виде значений em или пикселей px, давайте начнем с сокращенного свойства border-radius:

<style>
.primer {
border-style: solid;
border-radius: 40px 60px 20px 30px;
}
</style>

И пример с указанием каждого свойства, для каждого угла:

<style>
.primer {
border-style: solid;
border-top-right-radius: 60px;
border-top-left-radius: 30px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 60px;
}
</style>

Закругление углов css

Овальные углы

Для того чтобы сделать угол овальным, нам нужно указать 2 значения для свойства border-radius, первое значение для горизонтального радиуса, а второе для вертикального радиуса, давайте взглянем на пример и вам все станет понятно. Для сокращенного свойства:

<style>
.primer {
border-style: solid;
border-radius: 40px / 60px;
}
</style>

И так, из данного примера мы можем видеть, что для всех углов горизонтальный радиус равен 40 px, когда как вертикальный радиус равен 60 px.

Взгляните на еще один пример для сокращенного свойства border-radius:

<style>
.primer {
border-style: solid;
border-radius: 30px 60px 20px 60px / 30px 70px 20px 80px;
}
</style>

В данном примере то, что идет слева слэша (/) – это горизонтальные значение, а справа - вертикальные, отсчет идет также по часовой стрелке, а именно верхний левый, верхний правый, нижний правый и нижний левый соответственно.

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

<style>
.primer {
border-style: solid;
border-top-left-radius: 30px 30px;
border-top-right-radius: 60px 70px;
border-bottom-right-radius: 20px 20px;
border-bottom-left-radius: 60px 80px;
}
</style>

Овальные углы в css

Стиль границы, ширина и цвет в одном свойстве border

Воспользуемся сокращенным свойством border для одновременного определения стиля границы, ширины и цвета, но помните, что значения для данного свойства не обрабатываются по принципу часовой стрелки, так как все значения обрабатываются одновременно и применяются для всех сторон! Давайте рассмотрим следующий пример:

<style>
.p {
border: 2px solid blue;
}
</style>
А в данном примере укажем только нижнюю границу и тем самым подчеркнем заголовок h1: <style>
.h1 {
border-bottom: 0.2em solid red;
}
</style>

Свойство border в css

Ну что ж, на этом все, я думаю, данная статья о границах css оказалась вам полезной, с вами был Тимур Казанский, и увидимся в следующих статьях.

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0