حدود

في وحدة نموذج المربّع، استخدمنا تشبيهًا بالإطار لوصف كل قسم من نموذج المربّع.

ثلاثة إطارات صور بجانب بعضها
يتضمّن الإطار الأوسط أقسام نموذج العلبة فوقه.

يشكّل مربّع الحدود إطار مربّعاتك، ويقدّم لك خيارات متعددة لإنشاء هذا الإطار بأسلوب يناسبك.border

خصائص الحدود

توفّر سمات border الفردية طريقة لتنسيق الأجزاء المختلفة من الحدود.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

النمط

لكي يظهر الحد، عليك تحديد border-style. في ما يلي بعض الخيارات:

عند استخدام الأنماط ridge وinset وoutset وgroove، سيُغمق المتصفّح لون الحدود للّون الثاني المعروض لتوفير التباين والعمق. يمكن أن يختلف هذا السلوك بين المتصفّحات، خاصةً للألوان الداكنة مثل black. في Chrome، ستظهر أنماط الحدود هذه غير شفافة، وفي Firefox، ستتم تفتيحها لتوفير لون ثانٍ أغمق.

يمكن أن يختلف سلوك المتصفّح أيضًا في أنماط الحدود الأخرى، لذلك من المهم اختبار موقعك الإلكتروني في متصفّحات مختلفة. ومن الأمثلة الشائعة على هذا الاختلاف طريقة عرض كل متصفّح لنمطَي dotted وdashed.

عرض الحدود في Chrome
  وFirefox وSafari الذي يوضّح الاختلافات الدقيقة
  في كيفية عرض الحدود
الحدود المعروضة في Chrome وFirefox وSafari

لضبط نمط الحدود على كل جانب من المربّع، يمكنك استخدام border-top-style، border-right-style، border-left-style، وborder-bottom-style.

الكتابة المختصرة

كما هو الحال مع margin وpadding، يمكنك استخدام الرمز المختصر border لتحديد جميع أجزاء الحدود في بيان واحد.

.my-element {
    border: 1px solid red;
}

ترتيب القيم في الاختصار border هو border-width، border-style ثم border-color.

اللون

يمكنك ضبط اللون على جميع جوانب العلبة أو على كل جانب على حدة باستخدام رمز border-color. يستخدم هذا الخيار تلقائيًا لون النص الحالي في المربّع: currentColor. وهذا يعني أنّه في حال تحديد خصائص الحدود فقط، مثل العرض، سيكون اللون هو تلك القيمة المحسوبة ما لم يتم ضبطه صراحةً.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

لضبط لون حدود على كل جانب من المربّع، استخدِم border-top-color و border-right-color و border-left-color و border-bottom-color.

العرض

عرض الحدود هو سمك الخط، ويتم التحكّم فيه باستخدام العنصر border-width. ويبلغ عرض الحدود التلقائي medium. ولن يظهر هذا العنوان إلا إذا حدّدت نمطًا. يمكنك استخدام سمات عرض أخرى مُعنوَنة، مثل thin وthick.

تسمح سمات border-width أيضًا باستخدام وحدة طول مثل px أو em أو rem أو %. لضبط عرض الحدود على كل جانب من المربّع، استخدِم رمزي border-top-width و border-right-width و border-left-width و border-bottom-width.

الخصائص المنطقية

في وحدة السمات المنطقية، تعرّفت على كيفية الإشارة إلى تدفق الكتل والتدفق المضمّن، بدلاً من الإشارة إلى الجوانب العلوية أو اليمنى أو السفلية أو اليسرى بشكل صريح.

يمكنك أيضًا استخدام هذه الميزة مع الحدود:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

في هذا المثال، تم تحديد جميع جوانب .my-element على أنّها ذات حدود منقطة 2px، وهو لون النص الحالي. يتم بعد ذلك تعريف الحد inline-end على أنّه 2px، وهو صلب وأحمر. وهذا يعني أنّه في اللغات التي تُكتب من اليسار إلى اليمين، مثل الإنجليزية، سيكون الحدّ الأحمر على الجانب الأيمن من المربّع. في اللغات التي تُكتب من اليمين إلى اليسار، مثل العربية، سيكون الحدّ الأحمر على يمين المربّع.

تختلف إمكانات المتصفحات في ما يتعلّق بالسمات المنطقية في الحدود، لذا احرص على التحقّق من إمكانية استخدامها قبل استخدامها.

نصف قطر الحدود

لمنح مربّع زوايا مستديرة، استخدِم السمة border-radius.

.my-element {
    border-radius: 1em;
}

تضيف هذه الاختصارات حدودًا متّسقة إلى كلّ زاوية من مربّعك. كما هو الحال مع سمات الحدود الأخرى، يمكنك تحديد نصف قطر الحدود لكل جانب باستخدام border-top-left-radius و border-top-right-radius و border-bottom-right-radius و border-bottom-left-radius.

يمكنك أيضًا تحديد نصف قطر كل زاوية في الاختصار، الذي يتّبع الترتيب: أعلى يمين، أعلى يسار، أسفل يمين، ثم أسفل يسار.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

من خلال تحديد قيمة واحدة للزاوية، أنت تستخدِم اختصارًا آخر لأنّ نصف قطر الحدود مُقسَّم إلى جزأين: الجانبَين العمودي والأفقي. وهذا يعني أنّه عند ضبط border-top-left-radius: 1em، يتم ضبط نصف قطر الزاوية أعلى في أعلى يمين الشاشة ونصف قطر الزاوية يمين في أعلى يمين الشاشة.

يمكنك تحديد كلتا السمتَين لكلّ زاوية على النحو التالي:

.my-element {
    border-top-left-radius: 1em 2em;
}

يؤدي ذلك إلى إضافة قيمة border-top-left-top‏=1em وقيمة border-top-left-left‏=2em. يؤدي ذلك إلى تحويل نصف قطر الحدّ العلوي الأيسر إلى نصف قطر بيضاوي، بدلاً من نصف القطر الدائري التلقائي.

يمكنك تحديد هذه القيم في الاختصار border-radius، باستخدام / لتحديد القيم البيضاوية، بعد القيم العادية. يتيح لك ذلك استخدام قدراتك الإبداعية وإنشاء بعض الأشكال المعقدة.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

صور الحدود

لست مضطرًا إلى استخدام حدود مستندة إلى الخطوط في CSS فقط. يمكنك أيضًا استخدام أي نوع من الصور باستخدام border-image. تتيح لك هذه السمة المختصرة ضبط الصورة المصدر، وطريقة تقسيم هذه الصورة، وعرض الصورة، ومدى بروز الحدود عن الحافة وكيفية تكرارها.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

السمة border-image-width تشبه السمة border-width: فهي الطريقة التي تضبط بها عرض صورة الحدود. تتيح لك السمة border-image-outset ضبط المسافة بين صورة الحدود والمربّع الذي تلتفّ حوله.

border-image-source

يمكن أن يكون border-image-source (مصدر صورة الحدود) url لأي صورة صالحة، بما في ذلك التدرجات اللونية في CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

السمة border-image-slice هي سمة مفيدة تتيح لك تقسيم صورة إلى 9 أجزاء تتألف من 4 خطوط تقسيم. تعمل هذه العلامة مثل الاختصار margin حيث يمكنك تحديد قيمة العنصر المُعدّل للأعلى واليمين والأسفل واليسار.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

الصورة المستخدَمة في العرض التجريبي مع الشرائح الأربع المعروضة بخطوط زرقاء

بعد تحديد قيم الانحراف، يصبح لديك الآن 9 أقسام من الصورة: 4 زوايا و4 حواف وقسم وسط. يتم تطبيق الزوايا على زوايا العنصر باستخدام صورة الحدود. يتم تطبيق الحواف على حواف هذا العنصر. تحدّد السمة border-image-repeat كيفية ملء هذه الحواف لمساحة العرض، بينما تتحكّم السمة border-image-width في حجم الشرائح.

أخيرًا، تحدّد الكلمة الرئيسية fill ما إذا كان سيتم استخدام القسم الأوسط المتبقّي من عملية التقطيع كصورة خلفية للعنصر أم لا.

border-image-repeat

border-image-repeat هي الطريقة التي تُوجّه بها CSS إلى كيفية تكرار صورة الحدود. ويعمل هذا الرابط بالطريقة نفسها التي يعمل بها background-repeat.

  • القيمة الأولية هي stretch، التي تمدّد الصورة المصدر لملء المساحة المتاحة كلما أمكن ذلك.
  • تُرصِّع قيمة repeat حواف الصورة المصدر أكبر عدد ممكن من المرات، وقد تقتطع مناطق الحواف لتحقيق ذلك.
  • قيمة round هي نفسها قيمة repeat، ولكن بدلاً من اقتصاص مناطق حواف الصورة لتلائم أكبر عدد ممكن، يتم تمديد الصورة وتكرارها لتحقيق تكرار سلس.
  • قيمة space هي نفسها قيمة repeat، ولكنّ هذه القيمة تضيف مسافة بين كل منطقة حافة لإنشاء نمط سلس.

التحقّق من فهمك

اختبِر معلوماتك حول الحدود

ما هو لون الحدود التلقائي؟

black
white
historicColor
currentColor
.my-element {
  border: solid hotpink;
}

ما هو العرض التلقائي للحدود؟

solid
1px
medium

border-inline: 1px solid...

وضع حدود على السطر الأول
وضع حدود على اليسار واليمين (في التنسيقات اللاتينية)
وضع حدود في أعلى الشاشة وأسفلها (في التنسيقات اللاتينية)
وضع حدود على الجانب الداخلي