CSS Border
Border CSS — это сокращенное свойство, используемое для установки границы (рамки) элемента.
Свойства границы CSSиспользуются для указания стиля, цвета и размера границы элемента. Свойства границ CSS приведены ниже.
◦ border-style
◦ border-color
◦ border-width
◦ border-radius
border-style
Свойство border-style используется для указания типа границы, которую вы хотите отобразить на веб-странице.
Есть несколько значений border-style, которые используются со свойством border-style для определения границы.
none
не определяет никакой границы.
dotted
Точечная граница.
dashed
Пунктирная граница.
solid
Сплошная граница.
double
Двойная граница.
groove
Отображает границы с 3D groove эффектом и создает впечатление, что граница вырезана. Противоположный эффекту ridge.
ridge
Отображает границы с 3D ridge эффектом и создает впечатление, что граница выдвинута. Противоположный эффекту groove.
inset
3D эффект, создающий впечатление вложенного элемента. Противоположный эффекту outset.
outset
3D эффект, создающий впечатление выпуклого элемента. Противоположный эффекту inset.
hidden
Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы.
initial
Устанавливает свойство в значение по умолчанию.
inherit
Значение элемента наследуется от родительского элемента.
<html>
<head>
<style>
p.none {
border-style: none;
}
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
p.groove {
border-style: groove;
}
p.ridge {
border-style: ridge;
}
p.inset {
border-style: inset;
}
p.outset {
border-style: outset;
}
p.hidden {
border-style: hidden;
}
</style>
</head>
<body>
<p class="none">я разный абзац.</p>
<p class="dotted">я разный абзац.</p>
<p class="dashed">я разный абзац.</p>
<p class="solid">я разный абзац.</p>
<p class="double">я разный абзац.</p>
<p class="groove">я разный абзац.</p>
<p class="ridge">я разный абзац.</p>
<p class="inset">я разный абзац.</p>
<p class="outset">я разный абзац.</p>
<p class="hidden">я разный абзац.</p>
</body>
</html>
border-width
Свойство border-width используется для установки ширины границы. Он задается в пикселях. Вы также можете использовать одно из трех предварительно определенных значений: thin, medium, thick, чтобы установить ширину границы.
Примечание. Свойство border-width не используется отдельно. Он всегда используется с другими свойствами границы, такими как свойство «border-style», чтобы сначала установить границу, иначе она не будет работать.
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">я разный абзац.</p>
<p class="two">Wя разный абзац.</p>
<p class="three">я разный абзац.</p>
</body>
</html>
border-color
Существует три способа установки цвета границы.
◦ Имя: указывает название цвета. Например: «red».
◦ RGB: указывает значение RGB цвета. Например: "rgb(255,0,0)".
◦ Шестнадцатеричный: указывает шестнадцатеричное значение цвета. Например: "#ff0000".
Существует также цвет границы под названием «transparent». Если цвет границы не задан, он наследуется от свойства цвета элемента.
Примечание. Свойство border-color не используется отдельно. Он всегда используется с другими свойствами границы, такими как свойство «border-style», чтобы сначала установить границу, иначе она не будет работать.
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">я разный абзац.</p>
<p class="two">Wя разный абзац.</p>
<p class="three">я разный абзац.</p>
</body>
</html>
border-radius
Это свойство CSS устанавливает закругленные границы и обеспечивает закругленные углы вокруг элемента, тегов или div. Он определяет радиус углов элемента.
Это сокращение от border top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius . Он придает закругленную форму углам границы элемента. Мы можем указать границу для всех четырех углов блока в одном объявлении, используя border-radius. Значения этого свойства могут быть определены в процентах или единицах длины.
Это свойство CSSвключает в себя свойства, представленные ниже.
border-top-left-radius
Он используется для установки радиуса границы для верхнего левого угла.
border-top-right-radius
Он используется для установки радиуса границы для верхнего правого угла.
border-bottom-right-radius
Он используется для установки радиуса границы для нижнего правого угла.
border-bottom-left-radius
Он используется для установки радиуса границы для нижнего левого угла.
Если нижнее левое значение опущено, оно будет таким же, как и верхнее правое. Если убрать значение нижнего правого, то оно будет таким же, как и верхнее левое. Точно так же, если удалить верхний правый, он будет таким же, как верхний левый.
Давайте посмотрим, что произойдет, если мы укажем одно значение, два значения, три значения и четыре значения для этого свойства.
◦ Если мы предоставим этому свойству одно значение ( например, border-radius: 30px;) , оно установит для всех углов одинаковое значение.
◦ Когда мы указываем два значения ( например, border-radius: 20% 10% 😉 , то первое значение будет использоваться для верхнего левого и нижнего правого углов, а второе значение будет использоваться для верхнего правого и нижние левые углы.
◦ Когда мы используем три значения ( например, border-radius: 10% 30% 20%;), то первое значение будет использоваться для верхнего левого угла, второе значение будет применено к верхнему правому и нижнему левому углам. а третье значение будет применено к правому нижнему углу.
◦ Точно так же, когда это свойство имеет четыре значения (border-radius: 10% 30% 20% 40%;), тогда первое значение будет радиусом верхнего левого угла, второе значение будет использоваться для верхнего правого угла, третье значение будет применяться в правом нижнем углу, а четвертое значение используется в левом нижнем углу.
Синтаксис
border-radius: 1-4 length | % / 1-4 length | % | inherit | initial;
Значения свойств
length:
определяет форму углов. Он обозначает размер радиуса с использованием значений длины. Его значение по умолчанию равно 0. Он не допускает отрицательных значений.
%:
Обозначает размер радиуса в процентах. Он также не допускает отрицательных значений.
Пример:
<html>
<head>
<style>
div {
padding: 50px;
margin: 20px;
border: 6px ridge red;
width: 300px;
float: left;
height: 150px;
}
p {
font-size: 25px;
}
#one {
border-radius: 90px;
background: lightgreen;
}
#two {
border-radius: 25% 10%;
background: orange;
}
#three {
border-radius: 35px 10em 10%;
background: cyan;
}
#four {
border-radius: 50px 50% 50cm 50em;
background: lightblue;
}
</style>
</head>
<body>
<div id="one">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 90px;</p>
</div>
<div id="two">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 25% 10%;</p>
</div>
<div id="three">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 35px 10em 10%;</p>
</div>
<div id="four">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>
Теперь давайте посмотрим на радиус границы для определенных углов.
Пример - border-top-left-radius
Он устанавливает радиус границы для верхнего левого угла.
<html>
<head>
<style>
#left {
border-top-left-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="left">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-top-left-radius: 250px;</p>
</div>
</body>
</html>
Пример - border-top-right-radius
Он устанавливает радиус границы для верхнего правого угла.
<html>
<head>
<style>
#left {
border-top-right-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="left">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-top-right-radius: 250px;</p>
</div>
</body>
</html>
Пример - border-bottom-right-radius
Он устанавливает радиус границы для нижнего правого угла.
<html>
<head>
<style>
#left {
border-bottom-right-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="left">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-bottom-right-radius: 250px;</p>
</div>
</body>
</html>
Пример - border-bottom-left-radius
Он устанавливает радиус границы для нижнего левого угла.
<html>
<head>
<style>
#left {
border-bottom-left-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="left">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-bottom-left-radius: 250px;</p>
</div>
</body>
</html>
Мы можем указать отдельные горизонтальные и вертикальные значения, используя символ косой черты (/). Значения перед косой чертой (/) используются для горизонтального радиуса, а значения после косой черты (/) — для вертикального радиуса.
Ниже приведен пример с использованием символа косой черты (/).
Пример:
<html>
<head>
<style>
div {
padding: 50px;
border: 6px ridge red;
width: 300px;
margin: 20px;
font-weight: bold;
height: 175px;
12. float: left;
font-size: 25px;
}
#one {
border-radius: 10% / 50%;
background: lightgreen;
}
#two {
border-radius: 120px / 100px 10px;
background: lightblue;
}
#three {
border-radius: 50% 10em / 10% 20em;
background: lightpink;
}
#four {
border-radius: 100px 10em 120px / 30%;
background: cyan;
}
</style>
</head>
<body>
<div id="one">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 10% / 50%; </p>
</div>
<div id="two">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 120px / 100px 10px; </p>
</div>
<div id="three">
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 50% 10em / 10% 20em; </p>
</div>
<div id="four"<
<h2>добро пожаловать на mirjs.uz</h2>
<p>border-radius: 100px 10em 120px / 30%; </p>
</div>
</body>
</html>
