شرح خاصية border لتنسيق الحدود




تستخدم خاصية border في css لإضافة حدود حول العنصر كما يمكن تخصيص الحدود من جميع الاتجاهات وتخصيص الألوان وأشكال الحدود

// إظهار الحدود من جميع الاتجاهات بقيمة 1 بيكسل
border:1px solid

// إظهار الحدود من أعلى فقط
border-top:1px solid

// إظهار الحدود من اليمين فقط
border-right:1px solid

// إظهار الحدود من أسفل فقط
border-bottom:1px solid

// إظهار الحدود من اليسار فقط
border-left:1px solid


مثال بسيط


في المثال التالى استخدمنا عنصر div كطبقة ثم فئة class ثم قمنا بتسمية المعرف بإسم border-solid يمكنك تسمية المعرف كما تريد وبداخل الطبقة الأولى قمنا بإضافة طبقتين بنفس المعرف وهذا فقط لنري مثال ، ثم استخدمنا كود css وأضفنا خاصية padding لترك مسافة داخلية من كل طبقة بقيمة 10 بيكسل ثم استخدمنا خاصية margin-bottom:5px; لترك هامش خارجي من الأسفل بين الطبقات بمقدار 5 بيكسل ثم استخدمنا خاصية border:1px solid بقيمة 1 بيكسل وsolid لإظهار الخطوط كما تراها في المثال الحالى.

<div class='border-solid'>
<div class='border-solid-blue'></div>
<div class='border-solid-red'></div>
</div>

.border-solid {border:1px solid;}
.border-solid-blue {border:1px solid blue;}
.border-solid-red {border:1px solid red;}
.border-solid,.border-solid-blue,.border-solid-red{padding:10px;margin-bottom:5px;}



النتيجة




فى الأمثلة التالية قمنا باستخدام عنصر div 9 مرات ثم استخدمنا فئة class ثم قمنا بتسمية معرف كل طبقة مختلف تماما عن الطبقات الأخرى حتى لا يحدث تعارض بين الطبقات ثم استخدمنا كود css وجعلنا النص في منتصف الصفحة باستخدام خاصية text-align ثم خاصية margin-bottom لإضافة هامش خارجي أسفل كل طبقة بمقدار 10 بيكسل ثم خاصية padding لترك مسافات داخلية من جميع الاتجاهات بمقدر 10 بيكسل ثم استخدمنا خاصية border لإظهار الحدود وجعلنا سُمك الحدود بمقدار 1 بيكسل ، يمكنك اختيار سُمك الحدود كما تريد ، ثم أضفنا قيمة لخاصية border لظهور الشكل المناسب.

<div class='border-solid'>border-solid</div>
<div class='border-dotted'>border-dotted</div>
<div class='border-double'>border-double</div>
<div class='border-dashed'>border-dashed</div>
<div class='border-groove'>border-groove</div>
<div class='border-outset'>border-outset</div>
<div class='border-inset'>border-inset</div>
<div class='border-ridge'>border-ridge</div>
<div class='border-mixed'>border-mixed</div>

/*أشكال الحدود*/
.border-solid {border:1px solid;}
.border-dotted {border:1px dotted;}
.border-double {border:1px double;}
.border-dashed {border:1px dashed;}
.border-groove {border:1px groove;}
.border-outset {border:1px outset;}
.border-inset {border:1px inset;}
.border-ridge {border:1px ridge;}
.border-mixed {border:1px mixed;}


/*تنسيقات أخرى*/
.border-solid,.border-dotted,.border-double,
.border-dashed,.border-groove,.border-outset,
.border-inset,.border-ridge,.border-mixed
{padding:10px;margin-bottom:10px;text-align:center;}


النتيجة


border-solid
border-dotted
border-double
border-dashed
border-groove
border-outset
border-inset
border-ridge
border-mixed