מדריך CSS – גבולות

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

Table{border-color:green yellow orange purple;}

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

Td{border-right-color:blue;}

עובי הגבול נקבע ע"י התכונה border-width וברירת המחדל היא medium. ניתן גם לתת את הערכים thin וגם thick, או להשתמש במידות רוחב כגון 2px כדי לקבוע את העובי הרצוי במדוייק.
גם כאן נשמרת שיטת ההגדרות לפי מספר הערכים המוגדרים:

Td{border-width:2px;}
Td{border-width:thin medium;}
Td{border-width:thick 2mm 3px;}
Td{border-width:2px 3px 1px 5px;}

הדוגמה הראשונה תתן גבול בעל שני פיקסלים לכל פאה. הדוגמה השניה תתן גבול דק למעלה ולמטה ורגיל בצדדים. בשלישי, יש גבול עבה למעלה, בשני הצדדים 2 מילימטר כ"א ושלושה פיקסלים בתחתון. הדוגמה הרביעית תתחיל בעליון, הימני, התחתון והשמאלי ותתן להם עוביים של 2, 3, 1 ו-5 פיקסלים בהתאמה.

תכונת הborder-style מאפשרת לשים סוגים שונים של גבולות. הערכים האפשריים הם:
none,dotted,dashed,solid,double,ridge,inset,outset.
הערכים dotted, dashed, solid וגם double ישימו גבול כקו פשוט. הערכים האחרים יקבלו גבול תלת-מימדי. Groove הינו חיתוך פנימה, ridge הוא רכס, inset הוא הכנסה פנימה ו-outset הוא הבלטה של האלמנט.

אז איך כותבים גבולות בקיצור?

ראשית, ניתן להשתמש ב border כדי להגדיר את כל הפאות יחד.

Table{border: green double 4mm;
Border-bottom:thick red dotted;}

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