وثائق CSS قابلة للتشغيل: border في CSS

Q: كيف أضيف حدًا في CSS؟

استخدم الاختصار مع عرض ونمط ولون: border: 2px solid #2563eb;. النمط هو الجزء الأهم: من دونه يكون نمط الحد none ولا يُرسم أي حد.

Q: لماذا لا يظهر الحد border عندي؟

في الغالب لأنه لم يُضبط نمط للحد. 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 خطًا حول العنصر، بين حشوه وهامشه. يقبل الاختصار ثلاثة أجزاء بأي ترتيب: العرض والنمط واللون.

<!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 يشبه الحد لكنه يُرسم خارجه ولا يشغل مساحة، فإضافته لا تحرّك شيئًا أبدًا. لهذا تستخدم المتصفحات الإطار الخارجي لحلقات التركيز.

<!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 (أو نمطًا آخر).
حد يجعل التخطيط يقفز عند التمرير. احجز المساحة بحد شفاف، أو استخدم outline أو box-shadow.
نسيان الحد في حساب العرض. العنصر width: 100% مع حد يتجاوز حاويته تحت content-box. استخدم box-sizing: border-box.
border-radius مع ابن يبرز من الزوايا. أضف overflow: hidden إلى الأب المستدير.
إزالة إطارات التركيز بـ outline: none. مستخدمو لوحة المفاتيح يحتاجونها؛ أعد تنسيق الإطار بدل حذفه.

الأسئلة الشائعة

كيف أضيف حدًا في CSS؟

استخدم الاختصار مع عرض ونمط ولون: border: 2px solid #2563eb;. النمط هو الجزء الأهم: من دونه يكون نمط الحد none ولا يُرسم أي حد.

لماذا لا يظهر الحد border عندي؟

في الغالب لأنه لم يُضبط نمط للحد. 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 في المتصفحات الحالية.

مفاهيم ذات صلة