Der Grenze ist eine Abkürzungseigenschaft in CSS, die zum Hinzufügen eines Rahmens zu einem Element verwendet wird. Damit können wir den Rand der Box festlegen. Es legt die Breite, den Stil und die Farbe des Rahmens fest. Diese CSS-Eigenschaft umfasst die folgenden Rahmeneigenschaften:

Rahmenbreite:Mit der Eigenschaft border-width wird die Breite des Rahmens festgelegt. Wir können auch die vordefinierten Werte verwenden dünn, mittel, Und dick um die Breite des Randes festzulegen. Es legt die Dicke des Randes fest. Der Standardwert ist Mittel .
Diese Eigenschaft kann nicht alleine genutzt werden. Es wird immer mit anderen Rahmeneigenschaften wie der Eigenschaft „border-style“ verwendet, um zuerst den Rahmen festzulegen; andernfalls wird es nicht funktionieren.
Die Breite des Randes kann für jede einzelne Seite unterschiedlich sein. Dies kann durch die Verwendung von border-bottom-width erfolgen, Rand-oben-Breite, Rand-rechts-Breite , Und Rand-Links-Breite .Randstil:Diese Eigenschaft gibt den Stil des Rahmens an. Es definiert, ob der Rand durchgehend, gepunktet, gestrichelt, doppelt, gerillt oder einer der anderen möglichen Werte ist. Ohne das Festlegen dieser Eigenschaft, d. h. ohne Festlegen des Rahmenstils, funktionieren keine der anderen Rahmeneigenschaften. Der Rand wird ohne Angabe des unsichtbar sein Border-Stil . Dies liegt daran, dass der Standardwert dieser CSS-Eigenschaft ist keiner .
Ähnlich zu Rahmenbreite , kann der Stil der Umrandung für jede einzelne Seite unterschiedlich sein. Dies kann über die Eigenschaften erfolgen Border-Bottom-Style, Border-Top-Style, Border-Right-Style , Und Rand-Links-Stil .Randfarbe:Es ermöglicht uns, die Farbe des Randes zu ändern. Wir können die Farbe festlegen, indem wir den Farbnamen, den RGB-Wert oder den Hexadezimalwert verwenden. Ähnlich wie Rahmenbreite Und Border-Stil können wir die Farbe des Rahmens individuell ändern, d. h. wir können die Farbe der unteren, oberen, linken und rechten Seite des Rahmens eines Elements ändern. Dies kann mithilfe der Eigenschaften erfolgen Farbe des unteren Randes, Farbe des oberen Randes, Farbe des rechten Randes , Und Rand-Links-Farbe .
Der Randfarbe Eigentum kann nicht allein genutzt werden. Es muss mit anderen Rahmeneigenschaften wie der Eigenschaft „border-style“ verwendet werden, um den Rahmen festzulegen. andernfalls wird es nicht funktionieren.

Rand vs. Umriss

Obwohl Ränder und Umrisse sehr ähnlich sind, gibt es einige Unterschiede zwischen Umrissen und Rändern, die wie folgt sind:

• Bei Verwendung eines Umrisses können wir keine unterschiedliche Umrissbreite, Stil und Farbe für die vier Seiten eines Elements anwenden, wohingegen wir bei einem Rahmen den angegebenen Wert für alle vier Seiten eines Elements anwenden können.
• Der Rand ist Teil der Elementdimension, während der Umriss nicht Teil der Elementdimension ist. Das heißt, es spielt keine Rolle, wie dick die Kontur ist, die wir auf das Element anwenden, die Abmessungen ändern sich nicht.

Sehen wir uns ein Beispiel an, um die Border-Eigenschaft zu verstehen.

Beispiel

 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> 

Ausgabe

Nun gibt es ein weiteres Beispiel, in dem wir beide verwenden Gliederung Und Grenze Eigenschaften.

Beispiel

 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. 

Ausgabe