עיצוב גבול - סגנון, רוחב וצבע

עיצוב גבולות

לכל אלמנט ב-HTML ניתן להוסיף גבול המקיף אותו. הגבול יכול להיות בסגנון שונה, בעובי שונה ובצבע שונה.

כאשר מודל הקופסה שבשימוש הוא border-box, עובי הגבול נכלל ברוחב ובגובה של האלמנטים. ניתן לקרוא בהרחבה על מודל הקופסה.

קביעת סגנון גבול

ניתן לקבוע את סגנון הגבול של אלמנט HTML באמצעות התכונות הבאות:

• קביעת סגנון הגבול העליון - border-top-style
• קביעת סגנון הגבול התחתון - border-bottom-style
• קביעת סגנון הגבול השמאלי - border-left-style
• קביעת סגנון הגבול הימני - border-right-style

הסגנונות האפשריים:

• none - ללא גבול (ברירת המחדל).
• dotted - גבול מנוקד.
• dashed - גבול מקווקו.
• solid - גבול קווי רציף.
• double - גבול כפול.
• groove - גבול מחורץ.
• ridge - גבול בולט.
• inset - גבול הבולט פנימה (סגנון תלת-מימד).
• outset - גבול הבולט החוצה (סגנון תלת-מימד).

דוגמה:

.item {
	border-top-style:solid;
	border-bottom-style:double;
	border-right-style:groove;
	border-left-style:dashed;
}

בדוגמה זו קבענו עבור האלמנט item גבול עליון מסוג solid, גבול תחתון מסוג double, גבול ימני מסוג groove וגבול שמאלי מסוג dashed.

נוכל לעשות שימוש בתכונה border-style על מנת לקצר את ההגדרה ולקבוע את סגנון הגבול בפעם אחת עבור כמה מהצדדים.

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

אם התכונה מקבלת 2 ערכים, סגנון הגבול העליון והתחתון יקבע לפי הערך הראשון וסגנון הגבול הימני והשמאלי יקבע לפי הערך השני.

אם התכונה מקבלת 3 ערכים, סגנון הגבול העליון יקבע לפי הערך הראשון, סגנון הגבול הימני והשמאלי יקבע לפי הערך השני וסגנון הגבול התחתון יקבע לפי הערך השלישי.

אם התכונה מקבלת 4 ערכים, סגנון הגבול העליון יקבע לפי הערך הראשון, סגנון הגבול הימני יקבע לפי הערך השני, סגנון הגבול התחתון יקבע לפי הערך השלישי וסגנון הגבול השמאלי יקבע לפי הערך הרביעי (קביעת הסגנונות לפי כיוון השעון).

דוגמה:

.item {
	border-style:double;
}

.item2 {
	border-style:dashed solid;
}

.item3 {
	border-style:dotted groove solid;
}

.item4 {
	border-style:ridge dotted none solid;
}

בדוגמה זו קבענו עבור האלמנט item גבול מסוג double מכל 4 הכיוונים שלו. עבור האלמנט item2 קבענו גבול עליון ותחתון מסוג dashed וגבול ימני ושמאלי מסוג solid. עבור האלמנט item3 קבענו גבול עליון מסוג dotted, גבול ימני ושמאלי מסוג groove וגבול תחתון מסוג solid. עבור האלמנט item4 קבענו גבול עליון מסוג ridge, גבול ימני מסוג dotted, ללא גבול מתחת (ערך none) וגבול שמאלי מסוג solid.

קביעת עובי גבול

ניתן לקבוע את עובי הגבול של אלמנט HTML באמצעות התכונות הבאות:

• קביעת עובי הגבול העליון - border-top-width
• קביעת עובי הגבול התחתון - border-bottom-width
• קביעת עובי הגבול השמאלי - border-left-width
• קביעת עובי הגבול הימני - border-right-width

ערכים אפשריים לעובי הגבול הם thin (דק), medium (עובי בינוני) או thick (עבה), או יחידת מדידה מותרת.

דוגמה:

.item {
	border-top-width:thin;
	border-bottom-width:thick;
	border-right-width:3px;
	border-left-width:1.2em;
}

בדוגמה זו, קבענו עבור האלמנט item גבול עליון בעובי thin, גבול תחתון בעובי thick, גבול ימני בעובי 3 פיקסלים וגבול שמאלי בעובי 1.2 פעמים גודל הגופן.

נוכל לעשות שימוש בתכונה border-width על מנת לקצר את ההגדרה ולקבוע את עובי הגבול בפעם אחת עבור כמה מהצדדים.

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

אם התכונה מקבלת 2 ערכים, עובי הגבול העליון והתחתון יקבע לפי הערך הראשון ועובי הגבול הימני והשמאלי יקבע לפי הערך השני.

אם התכונה מקבלת 3 ערכים, עובי הגבול העליון יקבע לפי הערך הראשון, עובי הגבול הימני והשמאלי יקבע לפי הערך השני ועובי הגבול התחתון יקבע לפי הערך השלישי.

אם התכונה מקבלת 4 ערכים, עובי הגבול העליון יקבע לפי הערך הראשון, עובי הגבול הימני יקבע לפי הערך השני, עובי הגבול התחתון יקבע לפי הערך השלישי ועובי הגבול השמאלי יקבע לפי הערך הרביעי (קביעת העובי לפי כיוון השעון).

דוגמה:

.item {
	border-width:1px;
}

.item2 {
	border-width:1px 2px;
}

.item3 {
	border-width:1px 2px 3px;
}

.item4 {
	border-width:1px 2px 3px 4px;
}

בדוגמה זו קבענו עבור האלמנט item גבול בעובי 1 פיקסל. עבור האלמנט item2 קבענו גבול עליון ותחתון בעובי 1 פיקסל וגבול ימני ושמאלי בעובי 2 פיקסלים. עבור האלמנט item3 קבענו גבול עליון בעובי 1 פיקסל, גבול ימני ושמאלי בעובי 2 פיקסלים וגבול תחתון בעובי 3 פיקסלים. עבור האלמנט item4 קבענו גבול עליון בעובי 1 פיקסל, גבול ימני בעובי 2 פיקסלים, גבול תחתון בעובי 3 פיקסלים וגבול שמאלי בעובי 4 פיקסלים.

קביעת צבע גבול

ניתן לקבוע את צבע הגבול של אלמנט HTML באמצעות התכונות הבאות:

• קביעת צבע הגבול העליון - border-top-color
• קביעת צבע הגבול התחתון - border-bottom-color
• קביעת צבע הגבול השמאלי - border-left-color
• קביעת צבע הגבול הימני - border-right-color

ערכים אפשריים לצבע הגבול הם מילות מפתח (red, green, gold וכו'), צבעים בשיטת RGB או בשיטת HSL. 

להבנה טובה יותר של אופן ייצוג הצבעים, מומלץ לקרוא את המאמר שיטות לייצוג צבעים במחשב, מודל RGB ומודל HSL.

דוגמה:

.item {
	border-top-color:yellow;
	border-bottom-color:#ff00ff;
	border-right-color:gold;
	border-left-color:rgb(70, 80, 150, 0.8);
}

בדוגמה זו, קבענו עבור האלמנט item גבול עליון בצבע yellow, גבול תחתון בצבע ff00ff#, גבול ימני בצבע gold וגבול שמאלי בצבע rgb(70, 80, 150, 0.8).

נוכל לעשות שימוש בתכונה border-color על מנת לקצר את ההגדרה ולקבוע את צבע הגבול בפעם אחת עבור כמה מהצדדים.

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

אם התכונה מקבלת 2 ערכים, צבע הגבול העליון והתחתון יקבע לפי הערך הראשון וצבע הגבול הימני והשמאלי יקבע לפי הערך השני.

אם התכונה מקבלת 3 ערכים, צבע הגבול העליון יקבע לפי הערך הראשון, צבע הגבול הימני והשמאלי יקבע לפי הערך השני וצבע הגבול התחתון יקבע לפי הערך השלישי.

אם התכונה מקבלת 4 ערכים, צבע הגבול העליון יקבע לפי הערך הראשון, צבע הגבול הימני יקבע לפי הערך השני, צבע הגבול התחתון יקבע לפי הערך השלישי וצבע הגבול השמאלי יקבע לפי הערך הרביעי (קביעת הצבע לפי כיוון השעון).

דוגמה:

.item {
	border-color:blue;
}

.item2 {
	border-color:#6d7c97 green;
}

.item3 {
	border-color:orange rgb(50, 120, 180) silver;
}

.item4 {
	border-color:purple #451561 rgb(190, 120, 250, 0.8) hsla(44, 95.8%, 47.1%, 0.6);
}

בדוגמה זו קבענו עבור האלמנט item גבול בצבע blue. עבור האלמנט item2 קבענו גבול עליון ותחתון בצבע #6d7c97 וגבול ימני ושמאלי בצבע green. עבור האלמנט item3 קבענו גבול עליון בצבע orange, גבול ימני ושמאלי בצבע rgb(50, 120, 180) וגבול תחתון בצבע silver. עבור האלמנט item4 קבענו גבול עליון בצבע purple, גבול ימני בצבע #451561, גבול תחתון בצבע rgb(190, 120, 250, 0.8) וגבול שמאלי בצבע hsla(44, 95.8%, 47.1%, 0.6).

שימוש בתכונה border בצורה מקוצרת

ניתן לקבוע גבול בצורה מקוצרת וליצור כלל יחיד שמחליף כללים של border-style, border-width, border-color.

• התכונה border-top מחליפה את התכונות border-top-style, border-top-width, border-top-color
• התכונה border-bottom מחליפה את התכונות border-bottom-style, border-bottom-width, border-bottom-color
• התכונה border-left מחליפה את התכונות border-left-style, border-left-width, border-left-color
• התכונה border-right מחליפה את התכונות border-right-style, border-right-width, border-right-color

ניתן גם להשתמש בתכונה border שמחליפה את התכונות border-style, border-width, border-color וקובעת את הגדרות הגבול ל-4 הכיוונים.

כל אחת מהתכונות לעיל יכולה לקבל ערך אחד, שניים או שלושה, ללא חשיבות לסדר.

כאשר לא מופיע ערך עבור border-style, לא יוצג גבול כלל, כיוון שברירת המחדל של border-style היא none (ללא גבול).

כאשר לא מופיע ערך עבור border-width, עובי הגבול יהיה medium.

כאשר לא מופיע ערך עבור border-color, צבע הגבול יהיה הצבע שהוגדר לאלמנט בו הגבול נמצא.

דוגמה:

.item {
	border:dashed;
}

.item2 {
	border:2px solid;
}

.item3 {
	border:1px ridge rgba(241, 190, 150, .9);
}

.item4 {
	border-top:1px solid red;
}

.item5 {
	border-left:dotted blue;
}

בדוגמה זו, קבענו עבור האלמנט item גבול מסוג dashed (העובי יהיה medium וצבע הגבול יהיה צבע האלמנט). עבור האלמנט item2 קבענו גבול מסוג solid בעובי 2 פיקסלים (צבע הגבול יהיה צבע האלמנט). עבור האלמנט item3 קבענו גבול מסוג ridge בעובי 1 פיקסל ובצבע rgba(241, 190, 150, .9). עבור האלמנט item4 קבענו גבול עליון מסוג solid בעובי 1 פיקסל ובצבע red. עבור האלמנט item5 קבענו גבול שמאלי מסוג dotted בצבע blue.

התכונה outline

ה-outline הוא גבול חיצוני לאובייקט, אשר נמצא מחוץ לגבול ה-border (שכבת גבול נוספת). הוא אינו תופס מקום בחישובי מודל הקופסה.

את ה-outline קובעים לכל צדדי האובייקט. תכונות ה-outline הקיימות הן outline-style, outline-width, outline-color וניתן להשתמש גם בקיצור outline.

לא ניתן לקבוע outline לצד נתון כמו שאפשר ב-border, ולכן, לא קיימות תכונות כגון outline-left-color או outline-top.

דוגמה:

.item {
	outline-style:ridge;
	outline-width:3px;
	outline-color:#586878;
}

יש לשים לב, כי במצבים שונים דפדפנים שונים מציגים את ה-outline במעט אחרת, לכן, נעדיף תמיד את השימוש ב-border על פני outline.