CSS/Topics/Border

من موسوعة حسوب
< CSS‏ | Topics

شكل الإطار

الخاصية الوصف
border الخاصية border في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية border لا يمكن أن تُستخدَم لتحديد قيمة للخاصية border-image وإنما ستضبِط قيمتها إلى القيمة الابتدائية none.
border-bottom الخاصية border-bottom في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-bottom-color و border-bottom-style و border-bottom-width، هذه الخاصيات تصف كيفية عرض الإطار border السفلي للعنصر.
border-bottom-color تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-bottom.
border-bottom-style تُحدِّد شكل خط الإطار السفلي الخاص بالعنصر.
border-bottom-width تضبط عرض الإطار السفلي للعنصر.
border-color تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (border-top-color) والأيمن (border-right-color) والسفلي (border-bottom-color) والأيسر (border-left-color).
border-image تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية border-image بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية border-style.
border-image-outset تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار.
border-image-repeat تُعرِّف كيفية عرض الجزء الأوسط من صورة الإطار لكي تُطابِق أبعاد الإطار. ويمكن استخدام قيمة واحدة لهذه الخاصية لضبط سلوك جميع الحواف، أو يمكن تحديد قيمتين لضبط سلوك الحواف الأفقية والرأسية كلًا على حدة.
border-image-slice تُقسِّم الصورة المُحدَّدة عبر الخاصية border-image-source إلى تسع مناطق: الأركان الأربعة، والحواف الأربع، والوسط.
border-image-source تُعرِّف صورةً <image> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى none، فسيُستخدَم الشكل المُعرَّف في الخاصية border-style.
border-image-width تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية border-image-width أكبر من قيمة الخاصية border-width، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).
border-left الخاصية border-left في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-left-color و border-left-style و border-left-width، هذه الخاصيات تصف كيفية عرض الإطارborder الأيسر للعنصر.
border-left-color تُحدِّد لون الإطار الأيسر الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-left.
border-left-style تُحدِّد شكل خط الإطار الأيسر الخاص بالعنصر.
border-left-width تضبط عرض الإطار الأيسر للعنصر.
border-right الخاصية border-right في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-right-color و border-right-style و border-right-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيمن للعنصر.
border-right-color تُحدِّد لون الإطار الأيمن الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-right.
border-right-style تُحدِّد شكل خط الإطار الأيمن الخاص بالعنصر.
border-right-width تضبط عرض الإطار الأيمن للعنصر.
border-style تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي).
border-top الخاصية border-top في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-top-color و border-top-style و border-top-width، هذه الخاصيات تصف كيفية عرض الإطارborder العلوي للعنصر.
border-top-color تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-top.
border-top-style تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر.
border-top-width تضبط عرض الإطار العلوي للعنصر.
border-width الخاصية border-width المختصرة في CSS تضبط عرض إطار العنصر على جميع وجوهه: العلوي (border-top-width) والأيمن (border-right-width) والسفلي (border-bottom-width) والأيسر (border-left-width).

الأركان المدورة

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