The кордону це скорочена властивість у CSS, яка використовується для додавання рамки до елемента. Це дозволяє нам вказати межі коробки. Він встановлює ширину, стиль і колір рамки. Ця властивість CSS включає наступні властивості меж:

ширина кордону:Властивість border-width використовується для встановлення ширини рамки. Ми також можемо використовувати попередньо визначені значення тонкий, середній, і товстий щоб встановити ширину рамки. Задає товщину рамки. Його значення за замовчуванням середній .
Цю властивість не можна використовувати самостійно. Він завжди використовується з іншими властивостями кордону, наприклад властивістю 'border-style', щоб спочатку встановити межу; інакше це не спрацює.
Ширина бордюру може бути різною для кожної окремої сторони. Це можна зробити за допомогою border-bottom-width, border-top-width, border-right-width , і border-left-width .стиль кордону:Ця властивість визначає стиль рамки. Він визначає, чи буде межа суцільною, пунктирною, пунктирною, подвійною, жолобкою та одним із інших можливих значень. Без встановлення цієї властивості, тобто без встановлення стилю межі, жодна з інших властивостей рамки не працюватиме. Кордон буде невидимим без вказівки бордюрний стиль . Це тому, що значення за замовчуванням цієї властивості CSS становить немає .
Схожий на border-width , стиль кордону може бути різним для кожної окремої сторони. Це можна зробити за допомогою властивостей border-bottom-style, border-top-style, border-right-style , і border-left-style .колір рамки:Це дозволяє нам змінювати колір рамки. Ми можемо встановити колір, використовуючи назву кольору, значення RGB або шістнадцяткове значення. Подібний до border-width і бордюрний стиль , ми можемо змінювати колір межі окремо, тобто ми можемо змінювати колір нижньої, верхньої, лівої та правої сторони межі елемента. Це можна зробити за допомогою властивостей border-bottom-color, border-top-color, border-right-color , і border-left-color .
The колір кордону майно не можна використовувати самостійно. Його потрібно використовувати з іншими властивостями кордону, наприклад властивістю 'border-style', щоб встановити межу; інакше це не спрацює.

кордон проти контуру

Хоча межі та контури дуже схожі, існують деякі відмінності між контурами та кордонами, які є такими:

• Використовуючи контур, ми не можемо застосувати різну ширину контуру, стиль і колір для чотирьох сторін елемента, тоді як у рамці ми можемо застосувати надане значення для всіх чотирьох сторін елемента.
• Рамка є частиною розміру елемента, тоді як контур не є частиною розміру елемента. Тобто неважливо, яку товщину контуру ми застосували до елемента, його розміри не зміняться.

Давайте розглянемо приклад, щоб зрозуміти властивість border.

приклад

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } 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;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Вихід

Тепер є інший приклад, у якому ми використовуємо обидва контур і кордону властивості.

приклад

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Вихід