TechCodeview

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 , и стил на границата вляво .цвят на границата:Позволява ни да променим цвета на рамката. Можем да зададем цвета, като използваме името на цвета, RGB стойността или шестнадесетичната стойност. Подобно на border-width и граничен стил , можем да променим цвета на границата поотделно, т.е. можем да променим цвета на долната, горната, лявата и дясната страна на границата на елемент. Може да се направи с помощта на свойствата цвят на границата отдолу, цвят на границата отгоре, цвят на границата отдясно , и 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. 

Изход