صفت border در CSS امكان تعيين استايل ،‌ ضخامت و رنگ خط حاشيه يك عنصر را فراهم مي كند.

 

استايل دهي به خط حاشيه ( border )

صفت border-style نوع خط مورد استفاده در حاشيه عنصر را مشخص مي كند.

مقادير مجاز براي اين صفت عبارتند از :
dotted - نقطه اي
dashed - خط بريده
solid - خط ممتد تكي
double - خط ممتد دوبل
groove - خط سه بعدي شياردار - نتيجه بستگي به مقدار رنگ دارد
ridge - خط سه بعدي لبه دار - نتيجه بستگي به مقدار رنگ دارد
inset - خط سه بعدي فروورفته -  نتيجه بستگي به مقدار رنگ دارد
outset - خط سه بعدي برآمده -  نتيجه بستگي به مقدار رنگ دارد
none - بدون خط حاشيه
hidden - خط حاشيه مخفي
mix - مخلوطي از انواع خطوط حاشيه براي چهار طرف


مثال :

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

ضخامت خط حاشيه border width

صفت border-width ضخامت چهار خط حاشيه عناصر را مشخص مي كند. ضخامت خطوط مي تواند با يك اندازه مشخص (در واحد هاي px ،‌ pt ،‌ cm ، em و ...) يا با 3 مقدار از پيش تععين شده نازك ،‌متوسط ،‌ ضخيم ،‌تعيين شود.
border-width مي تواند 1 تا 4 مقدار داشته باشد (خط بالا ،‌ راست ،‌پايين ،‌ چپ)

5px border-width

مثال :

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

رنگ خط حاشيه

border-color براي تعيين رنگ چهار خط حاشيه مورد استفاده است. رنگ ها مي توانند به 4 روش زير تعيين شوند :
نام رنگ
مقدار HEX
مقدار RGB
پشت نما

اين صفت نيز مي تواند 4 مقدار بالا - راست - پايين و چپ داشته باشد. اگر رنگ خط حاشيه تعيين نشود ،‌از رنگ عنصر مورد نظر تبعيت خواهد كرد.

Red border

مثال :

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

جهت هاي تكي در حاشيه ها

در مثال بالا مشاهده كردي كه مي توان براي جهت هاي 4 گانه هر خط حاشيه رنگ هاي جداگانه تعيين كرد. در CSS همچنين مي توان براي هر طرف نوع خط را نيز متفاوت از جهت ديگر ،‌تعريف كرد.
Different Border Styles

مثال :

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

p {
    border-style: dotted solid;
}

مختصر نويسي كدهاي border

با توجه به مثال بالا متوجه شده ايد كه هنگام كار با خطوط حاشيه صفات زيادي براي تعيين وجود دارند. براي كوتاه كردن كد ،‌امكان نوشتن آنها در يك صفت وجود دارد. صفت border مختصر شده صفات زير است :‌

border-width
border-style
border-color

مثال :

p {
    border: 5px solid red;
}

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

حاشيه هاي دورگرد

صفت border-radius براي دورگرد كردن خطوط حاشيه به دور يك عنصر به كار مي رود.

خطوط حاشيه عادي

خطوط حاشيه دورگرد

خطوط حاضيه دورگردتر

دورگردترين خطوط حاشيه


مثال :

p {
    border: 2px solid red;
    border-radius: 5px;
}