ה גבול הוא מאפיין קיצור ב-CSS, המשמש להוספת גבול על אלמנט. זה מאפשר לנו לציין את הגבול של התיבה. הוא קובע את הרוחב, הסגנון והצבע של הגבול. מאפיין CSS זה כולל את מאפייני הגבול הבאים:

רוחב גבול:המאפיין border-width משמש להגדרת רוחב הגבול. אנחנו יכולים גם להשתמש בערכים המוגדרים מראש שהם דק, בינוני, ו עבה כדי להגדיר את רוחב הגבול. זה קובע את עובי הגבול. ערך ברירת המחדל שלו הוא בינוני .
לא ניתן להשתמש בנכס זה לבד. הוא משמש תמיד עם מאפייני גבול אחרים כמו מאפיין 'בסגנון גבול' כדי להגדיר את הגבול תחילה; אחרת, זה לא יעבוד.
רוחב הגבול יכול להיות שונה עבור כל צד בודד. ניתן לעשות זאת באמצעות הגבול-תחתון-רוחב, גבול-עליון-רוחב, גבול-ימני-רוחב , ו גבול-שמאלי-רוחב .בסגנון גבול:מאפיין זה מציין את סגנון הגבול. הוא מגדיר אם הגבול הוא מוצק, מנוקד, מקווקו, כפול, חריץ ואחד מהערכים האפשריים האחרים. בלי להגדיר מאפיין זה, כלומר, בלי להגדיר את סגנון הגבול, אף אחד ממאפייני הגבול האחרים לא יעבוד. הגבול יהיה בלתי נראה מבלי לציין את בסגנון גבול . הסיבה לכך היא שערך ברירת המחדל של מאפיין CSS זה הוא אף אחד .
דומה ל רוחב גבול , הסגנון של הגבול יכול להיות שונה עבור כל צד בודד. ניתן לעשות זאת באמצעות המאפיינים גבול-תחתון-סגנון, גבול-טופ-סגנון, גבול-ימין-סגנון , ו בסגנון גבול-שמאל .צבע גבול:זה מאפשר לנו לשנות את צבע הגבול. אנו יכולים להגדיר את הצבע באמצעות שם הצבע, ערך RGB או ערך hex. דומה ל רוחב גבול ו בסגנון גבול , נוכל לשנות את צבע הגבול בנפרד, כלומר, נוכל לשנות את הצבע של הצד התחתון, העליון, השמאלי והימני של הגבול של אלמנט. ניתן לעשות זאת באמצעות המאפיינים גבול-תחתון-צבע, גבול-עליון-צבע, גבול-ימני-צבע , ו גבול-צבע שמאל .
ה צבע גבול לא ניתן להשתמש בנכס לבד. יש להשתמש בו עם מאפייני גבול אחרים כמו מאפיין 'בסגנון גבול' כדי להגדיר את הגבול; אחרת, זה לא יעבוד.

גבול מול מתאר

למרות שגבולות וקווי מתאר דומים מאוד, ישנם כמה הבדלים בין קווי מתאר וגבולות שהם כדלקמן:

• באמצעות קו מתאר, לא נוכל להחיל רוחב מתאר, סגנון וצבע שונים עבור ארבעת הצדדים של אלמנט, בעוד שבגבול, נוכל להחיל את הערך שסופק עבור כל ארבעת הצדדים של אלמנט.
• הגבול הוא חלק מהממד של האלמנט, בעוד שהקו המתאר אינו חלק מממד האלמנט. כלומר, זה לא משנה כמה עבה קו מתאר נחיל על האלמנט, הממדים שלו לא ישתנו.

בואו נראה דוגמה להבנת הנכס הגבול.

דוגמא

 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. 

תְפוּקָה