תיעוד HTML עם דוגמאות להרצה: קו אופקי

Q: איך מוסיפים קו אופקי ב-HTML?

השתמשו בתגית בשורה משלה. זה אלמנט ריק בלי תגית סגירה, והוא מצייר קו לכל רוחב המכל שלו.

Q: איך משנים את הצבע של hr?

הסירו את גבול ברירת המחדל וציירו גבול משלכם: hr { border: none; border-top: 2px solid #2563eb; }. גם הגדרה של color בלבד משנה אותו, אבל סגנון ה-inset של ברירת המחדל משאיר אותו מוצלל ודו גוני.

Q: איך הופכים hr לעבה יותר?

הגדירו את רוחב הגבול: hr { border: none; border-top: 4px solid #111827; }. המאפיין size ממדריכים ישנים עדיין עובד בדפדפנים אבל הוא מיושן, אז השתמשו ב-CSS.

קו אופקי ב-HTML: התגית hr ואיך לעצב אותה

ציירו קו אופקי ב-HTML עם התגית <hr>. למדו מה המשמעות שלה, איך לשנות את הצבע, העובי, הרוחב והסגנון שלה עם CSS, איך לבנות קו מפריד עם טקסט באמצע, ואיך ליצור קו אנכי.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך מוסיפים קו אופקי

שימו <hr> בין שני בלוקים של תוכן. אין לו תגית סגירה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

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

<hr> הוא קיצור של horizontal rule, קו אופקי. ב-HTML המשמעות שלו היא מעבר נושאי (thematic break): שינוי של נושא או של סצנה בתוך קטע. קוראי מסך מכריזים עליו כמפריד. אם אתם רוצים רק קו דקורטיבי (מתחת לכותרת, סביב כרטיס), ציירו אותו במקום זה עם גבול CSS על האלמנט הזה.

עיצוב hr עם CSS

המראה של ברירת המחדל מגיע מגבולות, ולכן הדרך האמינה לעצב <hr> היא להסיר אותם ולצייר גבול אחד בעצמכם:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

כדי לשנות	CSS
צבע	`border-top: 2px solid #2563eb` (אחרי `border: none`)
עובי	הרוחב בגבול הזה, כמו `6px`
סגנון	`solid`, `dashed`, `dotted`, `double`
אורך	`width: 40%`, ועוד `margin-inline: auto` כדי למרכז אותו
קצוות מעוגלים	`height` + `background` + `border-radius` במקום גבול
רווח סביבו	`margin`

הגדרה של color: blue בלבד על hr כן משנה את הקו בדפדפנים הנוכחיים, אבל סגנון ה-inset של ברירת המחדל מצליל אותו והוא שומר על גובה של 2px. איפוס הגבול נותן לכם בדיוק את מה שביקשתם.

מאפייני hr ישנים

קוד ישן משתמש במאפיינים על התגית עצמה:

<hr size="4" width="50%" color="red" noshade align="left">

size, width, color, noshade ו-align מיושנים. דפדפנים עדיין מחילים אותם כדי שעמודים ישנים ייראו נכון, אבל הם HTML לא תקין וקשה יותר לשנות אותם בהמשך. החליפו אותם ב-CSS שלמעלה.

קו מפריד עם טקסט באמצע

הקו עם "or" בין שני כפתורי התחברות אינו <hr> (hr לא יכול להכיל טקסט). זו שורת flex עם קו שמצויר בכל צד של המילה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

שני החלקים ::before ו-::after לוקחים כל אחד חצי מהמקום הפנוי עם flex: 1 ומציירים גבול עליון. שנו את or למילה ארוכה יותר והקווים יתכווצו כדי להתאים.

קווים אנכיים

אין גרסה אנכית של <hr>. ציירו קו אנכי עם גבול בצד אחד של אלמנט, או עם אלמנט דק בתוך שורת flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

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

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

כתיבת </hr>. <hr> הוא אלמנט ריק. <hr> או <hr /> זה כל מה שצריך.
שימוש ב-<hr> לקישוט. קוראי מסך מכריזים על כל אחד מהם. קו שהוא ויזואלי בלבד שייך ל-CSS.
עיצוב עם color בלבד. אפסו את הגבול עם border: none והגדירו border-top.
שימוש ב-<br> או בקווים תחתונים כדי לצייר קווים. השתמשו ב-<hr> או בגבול. ראו שבירת שורה כדי לדעת בשביל מה <br> נועד.
שימוש במאפיינים מיושנים. העבירו את size, width, color ו-noshade ל-CSS.

שאלות נפוצות

איך מוסיפים קו אופקי ב-HTML?

השתמשו בתגית <hr> בשורה משלה. זה אלמנט ריק בלי תגית סגירה, והוא מצייר קו לכל רוחב המכל שלו.

איך משנים את הצבע של hr?

הסירו את גבול ברירת המחדל וציירו גבול משלכם: hr { border: none; border-top: 2px solid #2563eb; }. גם הגדרה של color בלבד משנה אותו, אבל סגנון ה-inset של ברירת המחדל משאיר אותו מוצלל ודו גוני.

איך הופכים hr לעבה יותר?

הגדירו את רוחב הגבול: hr { border: none; border-top: 4px solid #111827; }. המאפיין size ממדריכים ישנים עדיין עובד בדפדפנים אבל הוא מיושן, אז השתמשו ב-CSS.

מה פירוש hr?

Horizontal rule, קו אופקי. ב-HTML הנוכחי הוא מסמן מעבר נושאי: שינוי של נושא או של סצנה בין פסקאות. קוראי מסך מכריזים עליו כמפריד.

איך יוצרים קו אנכי ב-HTML?

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

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