CSS Border

FavoriteLoadingДобавить в избранное

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
Значение элемента наследуется от родительского элемента.

<!DOCTYPE html>
<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», чтобы сначала установить границу, иначе она не будет работать.

<!DOCTYPE html>
<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», чтобы сначала установить границу, иначе она не будет работать.

<!DOCTYPE html>
<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. Он не допускает отрицательных значений.
%:
Обозначает размер радиуса в процентах. Он также не допускает отрицательных значений.
Пример:

<!DOCTYPE html>
<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

Он устанавливает радиус границы для верхнего левого угла.

<!DOCTYPE html>
<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

Он устанавливает радиус границы для верхнего правого угла.

<!DOCTYPE html>
<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

Он устанавливает радиус границы для нижнего правого угла.

<!DOCTYPE html>
<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

Он устанавливает радиус границы для нижнего левого угла.

<!DOCTYPE html>
<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>

Мы можем указать отдельные горизонтальные и вертикальные значения, используя символ косой черты (/). Значения перед косой чертой (/) используются для горизонтального радиуса, а значения после косой черты (/) — для вертикального радиуса.
Ниже приведен пример с использованием символа косой черты (/).
Пример:

<!DOCTYPE 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>
Написать Администратору

Вы можете написать Администратору сайта.

отправить