الحدود، تدوير الزوايا والخطوط الخارجية

فهم حدود CSS

تُعد الحدود (Borders) من أهم الخصائص البصرية في CSS. كل عنصر HTML يمكن أن يكون له حد حوله، وCSS يمنحك تحكمًا كاملًا في عرض هذا الحد ونمطه ولونه وشكله. تخدم الحدود أغراضًا وظيفية وزخرفية -- فهي تفصل أقسام المحتوى، وتُبرز العناصر التفاعلية، وتُنشئ تسلسلًا بصريًا، بل يمكنها إنتاج أشكال معقدة بدون أي صور. في هذا الدرس، سنستكشف كل جانب من جوانب حدود CSS، من صيغة الاختصار الأساسية إلى التقنيات المتقدمة مثل border-image ومثلثات CSS.

يقع الحد بين منطقة الحشو (padding) الخاصة بالعنصر وهامشه (margin) في نموذج صندوق CSS. هذا يعني أن الحد يُرسم خارج منطقة الحشو ولكن داخل منطقة الهامش. يساهم عرض الحد في الحجم الإجمالي للعنصر ما لم تكن تستخدم box-sizing: border-box، وفي هذه الحالة يتم تضمين عرض الحد ضمن العرض والارتفاع المُعلنين.

خاصية اختصار الحد (Border Shorthand)

خاصية border المختصرة هي الطريقة الأكثر شيوعًا للإعلان عن الحدود. تتيح لك تعيين العرض والنمط واللون في إعلان واحد. ترتيب القيم لا يهم بشكل صارم، لكن الترتيب التقليدي هو العرض ثم النمط ثم اللون.

/* الاختصار: العرض النمط اللون */
.element {
    border: 2px solid #333333;
}

/* خصائص مكافئة بدون اختصار */
.element {
    border-width: 2px;
    border-style: solid;
    border-color: #333333;
}

/* النمط فقط مطلوب -- العرض الافتراضي medium واللون الافتراضي currentColor */
.minimal-border {
    border: solid;
}

/* أمثلة متنوعة على الاختصار */
.thin-dashed {
    border: 1px dashed #999;
}

.thick-double {
    border: 4px double darkblue;
}

.red-dotted {
    border: 3px dotted crimson;
}

عرض الحد (Border Width)

تتحكم خاصية border-width في سُمك الحد. يمكنك تعيينها باستخدام قيم طول محددة أو قيم كلمات مفتاحية. مثل الهامش والحشو، يمكنك تحديد عروض مختلفة لكل جانب باستخدام قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم.

/* قيم الكلمات المفتاحية */
.thin-border {
    border-style: solid;
    border-width: thin;      /* عادةً 1px */
}

.medium-border {
    border-style: solid;
    border-width: medium;    /* عادةً 3px -- هذا هو الافتراضي */
}

.thick-border {
    border-style: solid;
    border-width: thick;     /* عادةً 5px */
}

/* قيم طول محددة */
.custom-border {
    border-style: solid;
    border-width: 2px;
}

/* قيم متعددة (أعلى، يمين، أسفل، يسار -- باتجاه عقارب الساعة) */
.varied-widths {
    border-style: solid;
    border-width: 1px 2px 3px 4px;  /* أعلى يمين أسفل يسار */
}

/* قيمتان: أعلى/أسفل ويسار/يمين */
.two-values {
    border-style: solid;
    border-width: 1px 3px;   /* أعلى/أسفل: 1px، يسار/يمين: 3px */
}

/* عروض الجوانب الفردية */
.individual-widths {
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 2px;
    border-bottom-width: 5px;
    border-left-width: 2px;
}

نمط الحد (Border Style)

خاصية border-style هي أهم خاصية للحد لأنه لن يتم عرض أي حد ما لم يتم تعيين نمط. يوفر CSS عشر قيم مختلفة لنمط الحد، كل منها تُنشئ تأثيرًا بصريًا مميزًا. بعضها زخرفي ونادرًا ما يُستخدم في التصميم الحديث، لكن فهمها جميعًا يمنحك مجموعة أدوات كاملة.

/* بدون حد (الافتراضي) */
.no-border {
    border-style: none;
}

/* مخفي -- مثل none لكنه يفوز في تعارضات الجداول المدمجة */
.hidden-border {
    border-style: hidden;
}

/* صلب -- الأكثر شيوعًا، خط واحد مستمر */
.solid-border {
    border: 3px solid #333;
}

/* متقطع -- سلسلة من شرائح خطية قصيرة */
.dashed-border {
    border: 3px dashed #333;
}

/* منقط -- سلسلة من النقاط */
.dotted-border {
    border: 3px dotted #333;
}

/* مزدوج -- خطان صلبان متوازيان مع مسافة بينهما */
.double-border {
    border: 5px double #333;
}

/* أخدود -- تأثير محفور */
.groove-border {
    border: 5px groove #888;
}

/* نتوء -- عكس الأخدود، يبدو مرتفعًا */
.ridge-border {
    border: 5px ridge #888;
}

/* غائر -- يجعل الصندوق يبدو مغروسًا في الصفحة */
.inset-border {
    border: 5px inset #888;
}

/* بارز -- يجعل الصندوق يبدو مرتفعًا عن الصفحة */
.outset-border {
    border: 5px outset #888;
}

/* أنماط مختلطة على جوانب مختلفة */
.mixed-styles {
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: double;
    border-width: 4px;
    border-color: #333;
}

لون الحد (Border Color)

تقبل خاصية border-color أي قيمة لون CSS صالحة -- أكواد هكس أو RGB أو RGBA أو HSL أو HSLA أو الألوان المسماة أو الكلمة المفتاحية الخاصة currentColor. مثل العرض والنمط، يمكنك تحديد ألوان مختلفة لكل جانب.

/* لون واحد لجميع الجوانب */
.uniform-color {
    border: 3px solid;
    border-color: #3498db;
}

/* ألوان مختلفة لكل جانب */
.colorful-border {
    border: 3px solid;
    border-color: red green blue orange;
    /* أعلى: أحمر، يمين: أخضر، أسفل: أزرق، يسار: برتقالي */
}

/* استخدام currentColor (السلوك الافتراضي) */
.inherit-text-color {
    color: navy;
    border: 2px solid;
    /* سيكون الحد كحلي لأن currentColor هو الافتراضي */
}

/* حدود شبه شفافة */
.transparent-border {
    border: 3px solid rgba(0, 0, 0, 0.3);
}

/* ألوان جوانب فردية */
.custom-side-colors {
    border: 3px solid;
    border-top-color: #e74c3c;
    border-right-color: #3498db;
    border-bottom-color: #2ecc71;
    border-left-color: #f39c12;
}

حدود الجوانب الفردية

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

/* حد فقط في الأسفل -- شائع لتأثيرات الخط السفلي */
.bottom-only {
    border: none;
    border-bottom: 2px solid #333;
}

/* حد لهجة يسرى -- شائع للاقتباسات والإشعارات */
.left-accent {
    border-left: 4px solid #3498db;
    padding-left: 16px;
}

/* حدود علوية وسفلية -- تأثير الخط الأفقي */
.top-bottom {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 16px 0;
}

/* بطاقة مخصصة مع معالجات جوانب مختلفة */
.fancy-card {
    border-top: 4px solid #e74c3c;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #eee;
    padding: 20px;
}

/* علامة تبويب نشطة */
.nav-tab-active {
    border: 1px solid #ddd;
    border-bottom: none;
    border-top: 3px solid #3498db;
    padding: 10px 20px;
    background: white;
}

تدوير الزوايا: Border Radius

خاصية border-radius هي واحدة من أكثر إضافات CSS3 المحبوبة. قبل CSS3، كان إنشاء زوايا مدورة يتطلب صورًا أو حلولًا معقدة. الآن، خاصية واحدة تُدور زوايا أي عنصر. رغم اسمها، تعمل border-radius على العناصر حتى بدون حد مرئي -- فهي تقص خلفية العنصر ومحتواه على الشكل المدور.

/* قيمة واحدة -- جميع الزوايا الأربع متساوية */
.rounded {
    border-radius: 8px;
}

/* قيمتان -- أعلى-يسار/أسفل-يمين وأعلى-يمين/أسفل-يسار */
.diagonal-round {
    border-radius: 10px 0px;
}

/* أربع قيم -- أعلى-يسار، أعلى-يمين، أسفل-يمين، أسفل-يسار (اتجاه عقارب الساعة) */
.four-corners {
    border-radius: 10px 5px 20px 0px;
}

/* خصائص الزوايا الفردية */
.individual-corners {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 20px;
}

/* قيم النسبة المئوية -- نسبية لأبعاد العنصر */
.percentage-radius {
    border-radius: 10%;
}

إنشاء الدوائر والأشكال البيضاوية

باستخدام قيم border-radius كبيرة أو خدعة الـ 50%، يمكنك إنشاء دوائر مثالية وأشكال حبة الدواء. هذه شائعة للغاية في تصميم الويب الحديث للصور الرمزية والشارات والعلامات والأزرار.

/* دائرة مثالية -- يجب أن يكون العنصر مربعًا */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #3498db;
}

/* دائرة صورة رمزية مع صورة */
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* شكل حبة الدواء */
.pill {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 9999px;
    background: #e74c3c;
    color: white;
    font-size: 14px;
}

/* شارة / علامة */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: #2ecc71;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* زر مدور */
.btn-rounded {
    display: inline-block;
    padding: 12px 32px;
    border: none;
    border-radius: 25px;
    background: #3498db;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

/* نصف دائرة -- تدوير الجزء العلوي فقط */
.semi-circle {
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
    background: #9b59b6;
}

تدوير زوايا بيضاوي (غير متماثل)

كل زاوية من border-radius تقبل في الواقع قيمتين -- نصف قطر أفقي ونصف قطر عمودي. عندما تكون هاتان القيمتان مختلفتين، تُشكل الزاوية منحنى بيضاويًا بدلًا من دائري. يتم الفصل بين الأنصاف الأفقية والعمودية بشرطة مائلة (/) في صيغة الاختصار.

/* زوايا بيضاوية: أنصاف-أفقية / أنصاف-عمودية */
.elliptical {
    border-radius: 50px / 25px;
}

/* شكل بيضة */
.egg {
    width: 120px;
    height: 160px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #f5deb3;
}

/* شكل عضوي */
.blob {
    width: 200px;
    height: 200px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* زاوية بيضاوية فردية */
.single-elliptical {
    border-top-left-radius: 50px 25px;
}

صورة الحد (Border Image)

تتيح خاصية border-image استخدام صورة أو تدرج لوني كحد بدلًا من لون صلب. هذه ميزة قوية لكنها أقل استخدامًا. خاصية border-image هي اختصار لخمس خصائص فرعية: border-image-source و border-image-slice و border-image-width و border-image-outset و border-image-repeat.

/* حد متدرج */
.gradient-border {
    border: 4px solid transparent;
    border-image: linear-gradient(to right, #e74c3c, #3498db) 1;
}

/* حد متدرج على جميع الجوانب */
.full-gradient-border {
    border: 3px solid;
    border-image-source: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
    border-image-slice: 1;
}

/* خط تحتي بتدرج قوس قزح */
.rainbow-underline {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(to right, red, orange, yellow, green, blue, purple) 1;
    border-image-slice: 0 0 1 0;
}

الخطوط الخارجية مقابل الحدود (Outlines vs Borders)

تبدو الخطوط الخارجية في CSS مشابهة للحدود لكنها تتصرف بشكل مختلف تمامًا. فهم الاختلافات بين الخطوط الخارجية والحدود مهم لكل من التصميم وإمكانية الوصول. خاصية outline ترسم خطًا حول العنصر خارج الحد، لكن على عكس الحدود، لا تأخذ الخطوط الخارجية مساحة في التخطيط ولا تؤثر على أبعاد العنصر أو موضعه.

/* اختصار الخط الخارجي -- مشابه لاختصار الحد */
.outlined {
    outline: 2px solid #3498db;
}

/* خصائص الخط الخارجي الفردية */
.detailed-outline {
    outline-width: 3px;
    outline-style: dashed;
    outline-color: red;
}

/* إزاحة الخط الخارجي -- تُنشئ مسافة بين الحد والخط الخارجي */
.offset-outline {
    border: 2px solid #333;
    outline: 2px solid #3498db;
    outline-offset: 4px;
}

/* إزاحة سلبية -- الخط الخارجي يتحرك داخل العنصر */
.inward-outline {
    outline: 2px dashed red;
    outline-offset: -10px;
}

/* أنماط تركيز مخصصة لإمكانية الوصول */
button:focus-visible {
    outline: 3px solid #3498db;
    outline-offset: 2px;
}

/* تأثير حلقة مزدوجة */
.double-ring {
    border: 3px solid #e74c3c;
    outline: 3px solid #3498db;
    outline-offset: 3px;
}

الاختلافات الرئيسية بين الحدود والخطوط الخارجية

هناك عدة اختلافات مهمة بين الحدود والخطوط الخارجية يجب أن يفهمها كل مطور:

• التأثير على التخطيط -- الحدود جزء من نموذج الصندوق وتؤثر على أبعاد العنصر. الخطوط الخارجية لا تأخذ مساحة ولا تؤثر على التخطيط. إضافة خط خارجي لن تتسبب أبدًا في تحرك عناصر أخرى.
• الجوانب الفردية -- يمكن تعيين الحدود بشكل مستقل لكل جانب. الخطوط الخارجية تُحيط بالعنصر بالكامل بشكل موحد -- لا يمكنك وضع خط خارجي على جانب واحد فقط.
• تدوير الزوايا -- تحترم الحدود border-radius وتتبع الشكل المدور. في المتصفحات الحديثة، الخطوط الخارجية أيضًا تتبع border-radius.
• الإزاحة -- الخطوط الخارجية لديها خاصية outline-offset لإنشاء مسافة. الحدود ليس لها خاصية إزاحة مكافئة.
• التداخل -- لأن الخطوط الخارجية لا تؤثر على التخطيط، يمكنها التداخل مع العناصر المجاورة.
• إمكانية الوصول -- الخطوط الخارجية هي الطريقة الافتراضية التي تُشير بها المتصفحات إلى تركيز لوحة المفاتيح على العناصر التفاعلية.

الخطوط الخارجية لإمكانية الوصول

من أهم استخدامات الخطوط الخارجية هو مؤشرات التركيز للتنقل بلوحة المفاتيح. عندما يتنقل المستخدمون في موقع ويب باستخدام مفتاح Tab، يُظهر المتصفح خطًا خارجيًا حول العنصر المُركز حاليًا. هذا ضروري للمستخدمين الذين لا يستطيعون استخدام الفأرة.

/* لا تفعل هذا أبدًا بدون توفير بديل! */
*:focus {
    outline: none; /* انتهاك لإمكانية الوصول */
}

/* أفضل: استخدم :focus-visible لإخفاء الخطوط لمستخدمي الفأرة فقط */
button:focus {
    outline: none;
}

button:focus-visible {
    outline: 3px solid #3498db;
    outline-offset: 2px;
}

/* أفضل ممارسة: أنماط تركيز مخصصة تتناسب مع تصميمك */
input:focus-visible {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

مثلثات CSS باستخدام الحدود

واحدة من أذكى حيل CSS هي إنشاء مثلثات باستخدام الحدود فقط. تستغل هذه التقنية حقيقة أنه عندما يكون عرض وارتفاع العنصر صفرًا، تلتقي الحدود عند خطوط قطرية مكونة مثلثات. تُستخدم هذه التقنية بشكل مكثف في تلميحات الأدوات وأسهم القوائم المنسدلة وفقاعات المحادثة والعناصر الزخرفية.

/* مثلث يشير للأعلى */
.triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 40px solid #e74c3c;
}

/* مثلث يشير للأسفل */
.triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 40px solid #3498db;
}

/* مثلث يشير لليمين */
.triangle-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 40px solid #2ecc71;
}

/* مثلث يشير لليسار */
.triangle-left {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 40px solid #f39c12;
}

/* تلميح أداة مع سهم مثلثي */
.tooltip {
    position: relative;
    background: #333;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    display: inline-block;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #333;
}

/* فقاعة محادثة */
.speech-bubble {
    position: relative;
    background: #e8f4f8;
    border: 1px solid #b8daff;
    border-radius: 12px;
    padding: 16px;
    max-width: 300px;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #e8f4f8;
}

أمثلة عملية

الآن دعنا نجمع كل ما تعلمناه في مكونات عملية يمكنك استخدامها في مشاريع حقيقية.

<!-- HTML -->
<div class="card">
    <div class="card-image">
        <img src="photo.jpg" alt="صورة البطاقة">
    </div>
    <div class="card-body">
        <span class="card-badge">مميز</span>
        <h3 class="card-title">عنوان البطاقة</h3>
        <p class="card-text">نص وصفي لهذه البطاقة.</p>
        <button class="card-btn">اعرف المزيد</button>
    </div>
</div>

<!-- CSS -->
<style>
.card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    max-width: 350px;
    transition: border-color 0.3s ease;
}

.card:hover {
    border-color: #3498db;
}

.card-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 9999px;
    background: #e8f4f8;
    border: 1px solid #3498db;
    color: #3498db;
    font-size: 12px;
    font-weight: 600;
}

.card-title {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
}

.card-btn {
    padding: 10px 24px;
    border: 2px solid #3498db;
    border-radius: 6px;
    background: transparent;
    color: #3498db;
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-btn:hover {
    background: #3498db;
    color: white;
}
</style>

.alert {
    padding: 16px 20px;
    border-radius: 8px;
    border: 1px solid;
    border-left-width: 5px;
    margin-bottom: 16px;
}

.alert-success {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.alert-warning {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.alert-danger {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
}

<div class="avatar-wrapper">
    <img src="user.jpg" alt="المستخدم" class="avatar-circle">
    <span class="status-dot online"></span>
</div>

<style>
.avatar-wrapper {
    position: relative;
    display: inline-block;
}

.avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid white;
    outline: 2px solid #e0e0e0;
    object-fit: cover;
}

.status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
}

.status-dot.online { background: #2ecc71; }
.status-dot.offline { background: #95a5a6; }
.status-dot.busy { background: #e74c3c; }
</style>

/* زر بحد خارجي / شبحي */
.btn-outline {
    padding: 10px 24px;
    background: transparent;
    border: 2px solid #3498db;
    border-radius: 6px;
    color: #3498db;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background: #3498db;
    color: white;
}

/* زر بحد متدرج */
.btn-gradient-border {
    padding: 10px 24px;
    background: white;
    border: 3px solid transparent;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
    color: #764ba2;
    cursor: pointer;
    font-weight: bold;
}

/* زر بخط سفلي متحرك */
.btn-underline {
    padding: 10px 4px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #333;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.btn-underline:hover {
    border-bottom-color: #e74c3c;
}

/* مجموعة أزرار حبة الدواء */
.btn-group .btn-pill {
    padding: 8px 20px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
}

.btn-group .btn-pill:first-child {
    border-radius: 9999px 0 0 9999px;
}

.btn-group .btn-pill:last-child {
    border-radius: 0 9999px 9999px 0;
}

.btn-group .btn-pill.active {
    background: #3498db;
    border-color: #3498db;
    color: white;
}