תיעוד CSS עם דוגמאות להרצה: גבול (Border)

Q: איך מוסיפים גבול ב-CSS?

משתמשים בקיצור עם עובי, סגנון וצבע: border: 2px solid #2563eb;. הסגנון הוא החלק החשוב ביותר: בלעדיו, סגנון הגבול הוא none ושום גבול לא מצויר.

Q: למה הגבול שלי ב-CSS לא מופיע?

כמעט תמיד כי לא הוגדר סגנון גבול. border: 2px #2563eb; או border-color: red; לבד לא מציירים כלום, כי ברירת המחדל של border-style היא none. הוסיפו solid, dashed או סגנון אחר.

Q: איך יוצרים פינות מעוגלות ב-CSS?

משתמשים ב-border-radius: border-radius: 8px; מעגל את כל ארבע הפינות. border-radius: 50%; על ריבוע יוצר עיגול, וערך גדול כמו 999px יוצר צורת גלולה. הוא מעגל גם את הרקע, גם בלי גבול.

Q: איך מוסיפים גבול רק לצד אחד?

משתמשים במאפיין של צד: border-bottom: 2px solid #e5e7eb;, או border-inline-start לצד שבו הטקסט מתחיל, שעובד גם בשפות שנכתבות מימין לשמאל.

הקיצור border

border מצייר קו סביב אלמנט, בין ה-padding שלו ל-margin שלו. הקיצור מקבל שלושה חלקים בכל סדר: עובי, סגנון וצבע.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

חלק	מאפיין מלא	ערכים	ברירת מחדל
עובי	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
סגנון	`border-style`	`solid`, `dashed`, `dotted`, `double`, ועוד	`none`
צבע	`border-color`	כל צבע	`currentColor` (צבע הטקסט)

את הסגנון אי אפשר לדלג עליו. ברירת המחדל שלו היא none, ולכן border: 2px #2563eb; לא מצייר כלום. אם משמיטים את הצבע, הגבול מקבל את צבע הטקסט של האלמנט.

סגנונות גבול

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double צריך לפחות 3px כדי להציג שני קווים. groove, ridge, inset ו-outset מצללים את הצבע כדי שייראה תלת ממדי, ונראים מעט שונה בין דפדפנים. hidden נראה כמו none; ההבדל ביניהם קיים רק בטבלאות עם גבולות ממוזגים, שעליהן מסביר עמוד גבולות הטבלה ב-HTML.

צד אחד בכל פעם

לכל צד יש קיצור משלו (border-top, border-right, border-bottom, border-left), ולכל חלק יש מאפיינים מלאים לכל צד, כמו border-top-color. הגרסאות הלוגיות, border-inline-start ו-border-block-end, עוקבות אחרי כיוון הטקסט:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width ו-border-style מקבלים בין ערך אחד לארבעה, באותו סדר של כיוון השעון כמו ב-padding: למעלה, ימין, למטה, שמאל.

פינות מעוגלות עם border-radius

border-radius מעגל את הפינות של הגבול וגם של הרקע, כך שהוא עובד גם על אלמנטים בלי גבול בכלל.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

ערך	תוצאה
`border-radius: 8px`	כל הפינות מעוגלות ב-8px
`border-radius: 50%`	עיגול על אלמנט ריבועי, אליפסה על מלבן
`border-radius: 999px`	גלולה: הצלעות הקצרות הופכות לחצאי עיגול מלאים
`border-radius: 8px 0`	עליונה שמאלית ותחתונה ימנית 8px, השתיים האחרות ישרות
`border-top-left-radius: 12px`	פינה אחת בלבד
`border-radius: 50% / 25%`	פינות אליפטיות: רדיוס אופקי / רדיוס אנכי

ילד עם רקע יכול לבלוט מעבר לפינות המעוגלות של ההורה. overflow: hidden על ההורה חותך אותו לפי הקימור.

Border מול outline

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
תופס מקום	כן, חלק מגודל התיבה	לא
לכל צד	כן (`border-top`, ...)	לא, מסביב לכל התיבה
עוקב אחרי `border-radius`	כן	כן, בדפדפנים הנוכחיים
מרחק מהתיבה	לא	כן, `outline-offset`
שימוש טיפוסי	עיצוב	מחווני פוקוס, דיבוג

טעויות נפוצות

אין סגנון גבול. border: 1px #111827; ו-border-color: red; לא מציירים כלום. כללו solid (או סגנון אחר).
גבול שגורם לפריסה לקפוץ ב-hover. שמרו את המקום עם גבול שקוף, או השתמשו ב-outline או ב-box-shadow.
שכחה של הגבול בחישוב הרוחב. אלמנט עם width: 100% וגבול גולש מהמכל שלו תחת content-box. השתמשו ב-box-sizing: border-box.
border-radius עם ילד שבולט מהפינות. הוסיפו overflow: hidden להורה המעוגל.
הסרת טבעות פוקוס עם outline: none. משתמשי מקלדת צריכים אותן; עצבו את ה-outline מחדש במקום למחוק אותו.

שאלות נפוצות

איך מוסיפים גבול ב-CSS?

משתמשים בקיצור עם עובי, סגנון וצבע: border: 2px solid #2563eb;. הסגנון הוא החלק החשוב ביותר: בלעדיו, סגנון הגבול הוא none ושום גבול לא מצויר.

למה הגבול שלי ב-CSS לא מופיע?

כמעט תמיד כי לא הוגדר סגנון גבול. border: 2px #2563eb; או border-color: red; לבד לא מציירים כלום, כי ברירת המחדל של border-style היא none. הוסיפו solid, dashed או סגנון אחר.

איך יוצרים פינות מעוגלות ב-CSS?

משתמשים ב-border-radius: border-radius: 8px; מעגל את כל ארבע הפינות. border-radius: 50%; על ריבוע יוצר עיגול, וערך גדול כמו 999px יוצר צורת גלולה. הוא מעגל גם את הרקע, גם בלי גבול.

איך מוסיפים גבול רק לצד אחד?

משתמשים במאפיין של צד: border-bottom: 2px solid #e5e7eb;, או border-inline-start לצד שבו הטקסט מתחיל, שעובד גם בשפות שנכתבות מימין לשמאל.

מה ההבדל בין border ל-outline?

גבול הוא חלק מהתיבה: הוא תופס מקום ומשנה את גודל האלמנט. Outline מצויר מחוץ לגבול בלי לתפוס מקום, אי אפשר לקבוע אותו לכל צד בנפרד, ובו דפדפנים משתמשים לטבעות פוקוס. שניהם עוקבים אחרי border-radius בדפדפנים הנוכחיים.

מושגים קשורים