The granica to skrócona właściwość w CSS, która służy do dodawania obramowania elementu. Pozwala nam określić granicę pudełka. Ustawia szerokość, styl i kolor obramowania. Ta właściwość CSS zawiera następujące właściwości obramowania:

szerokość granicy:Właściwość border-width służy do ustawiania szerokości obramowania. Możemy także skorzystać z predefiniowanych wartości tj cienki, średni, I gruby aby ustawić szerokość obramowania. Ustawia grubość obramowania. Jego domyślna wartość to średni .
Ta właściwość nie może być używana samodzielnie. Jest zawsze używany z innymi właściwościami obramowania, takimi jak właściwość „styl obramowania”, aby ustawić obramowanie jako pierwsze; w przeciwnym razie to nie zadziała.
Szerokość obramowania może być różna dla każdej strony. Można to zrobić za pomocą szerokości dolnej krawędzi, szerokość-górna granica, szerokość-prawa-ramka , I szerokość-lewej krawędzi .styl obramowania:Ta właściwość określa styl obramowania. Określa, czy obramowanie jest pełne, kropkowane, przerywane, podwójne, rowkowane i ma jedną z innych możliwych wartości. Bez ustawienia tej właściwości, tj. bez ustawienia stylu obramowania, żadna z pozostałych właściwości obramowania nie będzie działać. Bez określenia granicy granica będzie niewidoczna styl graniczny . Dzieje się tak, ponieważ domyślna wartość tej właściwości CSS to nic .
Podobny do szerokość granicy , styl obramowania może być inny dla każdej strony. Można to zrobić za pomocą właściwości styl obramowania na dole, styl obramowania na górze, styl obramowania po prawej stronie , I styl obramowania w lewo .kolor ramki:Umożliwia nam zmianę koloru obramowania. Kolor możemy ustawić za pomocą nazwy koloru, wartości RGB lub wartości szesnastkowej. Podobny do szerokość granicy I styl graniczny , możemy indywidualnie zmienić kolor obramowania, czyli możemy zmienić kolor dolnej, górnej, lewej i prawej strony obramowania elementu. Można to zrobić za pomocą właściwości kolor-dolny-obramowanie, kolor-obramowanie-górny, kolor-obramowanie-prawy , I kolor obramowania po lewej stronie .
The kolor ramki Nieruchomość nie może być używana samodzielnie. Aby ustawić granicę, należy jej używać z innymi właściwościami obramowania, takimi jak właściwość „styl obramowania”. w przeciwnym razie to nie zadziała.

granica a kontur

Chociaż obramowania i kontury są bardzo podobne, istnieją pewne różnice między konturami i obramowaniami, które są następujące:

• Używając konturu, nie możemy zastosować różnej szerokości, stylu i koloru konturu dla czterech boków elementu, natomiast w przypadku obramowania możemy zastosować podaną wartość dla wszystkich czterech boków elementu.
• Obramowanie jest częścią wymiaru elementu, natomiast kontur nie jest częścią wymiaru elementu. Oznacza to, że nie ma znaczenia jak gruby obrys nałożymy na element, jego wymiary się nie zmienią.

Zobaczmy przykład, aby zrozumieć właściwość granicy.

Przykład

 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> 

Wyjście

Teraz mamy inny przykład, w którym używamy obu zarys I granica nieruchomości.

Przykład

 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. 

Wyjście