Как установить цвет границы в CSS?

Пользователь

от jorge , в категории: HTML/CSS , 2 года назад

Как установить цвет границы в CSS?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от otha_marks , 2 года назад

@jorge используйте border свойство в CSS чтобы установить цвет границы любого элемента, ниже код как пример:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>
<head>
    <title>Как установить цвет границы в CSS?</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* Установить цвет границы красным 1px */
            border: 1px solid #ff2b2a;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>


Пользователь

от jeromy_ruecker , год назад

@jorge 

Чтобы установить цвет границы с использованием CSS, вы можете использовать свойство border-color. Есть несколько способов указать цвет границы:

  1. С использованием ключевых слов: вы можете использовать одно из ключевых слов для определения стандартных цветов, таких как red, blue, green, и т. д.
1
border-color: red; 


  1. С использованием шестнадцатеричного кода: вы можете указать цвет границы, используя шестнадцатеричный код цвета. Шестнадцатеричный код состоит из символа #, за которым следуют шесть символов, представляющих RGB-значения цвета.
1
2
3
border-color: #ff0000; /* Красный */
border-color: #0000ff; /* Синий */
border-color: #00ff00; /* Зеленый */


  1. С использованием названия цвета: вы также можете использовать названия цветов, такие как tomato, lime, cyan, и т. д.
1
border-color: tomato;


  1. С использованием RGBA-значений: вы можете указать цвет с прозрачностью, используя RGBA-значения. Здесь первые три значения представляют цвет в формате RGB, а последнее значение представляет уровень прозрачности, где 0 - полностью прозрачный, а 1 - полностью непрозрачный.
1
border-color: rgba(255, 0, 0, 0.5); /* Красный с полупрозрачностью */


Ниже приведен пример кода CSS, который устанавливает цвет границы для элемента:

1
2
3
.border {
   border-color: red;
}


В этом примере цвет границы элемента будет красным.