مرز ها در CSS

ویژگی‌های مربوط به مرز (border) در CSS این امکان را فراهم می‌کنند که بتوانید نوع، ضخامت و رنگ مرز یک عنصر را مشخص کنید.

مثال‌هایی از استفاده مرز در عناصر مختلف:

• من در همه طرف‌ها مرز دارم.

• من فقط در پایین یک مرز قرمز دارم.

• من مرزهای گرد دارم.

• من فقط در سمت چپ یک مرز آبی دارم.

ویژگی border-style در CSS

ویژگی border-style مشخص می‌کند که چه نوع مرزی باید نمایش داده شود.

مقادیر مجاز برای این ویژگی عبارت‌اند از:

• dotted – مرز نقطه‌چین

• dashed – مرز خط‌چین

• solid – مرز خط صاف

• double – مرز دوتایی

• groove – مرز سه‌بعدی با ظاهر شیار؛ تأثیر آن وابسته به رنگ مرز است

• ridge – مرز سه‌بعدی با ظاهر برجسته؛ تأثیر آن وابسته به رنگ مرز است

• inset – مرز سه‌بعدی با ظاهر فرورفته؛ تأثیر آن وابسته به رنگ مرز است

• outset – مرز سه‌بعدی با ظاهر برجسته بیرونی؛ تأثیر آن وابسته به رنگ مرز است

• none – بدون مرز

• hidden – مرز مخفی

ویژگی border-style می‌تواند از یک تا چهار مقدار داشته باشد که به ترتیب برای مرز بالا، راست، پایین و چپ اعمال می‌شوند.

مثال: نمایش انواع سبک‌های مرز

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;}

نتیجه اجرای کد بالا:

• مرز نقطه‌چین

• مرز خط‌چین

• مرز خط صاف

• مرز دوتایی

• مرز شیاردار (تأثیر آن وابسته به رنگ مرز است)

• مرز برجسته (تأثیر آن وابسته به رنگ مرز است)

• مرز فرورفته (تأثیر آن وابسته به رنگ مرز است)

• مرز برجسته بیرونی (تأثیر آن وابسته به رنگ مرز است)

• بدون مرز

• مرز مخفی

• مرز ترکیبی (هر طرف با سبک متفاوت)

 نکته مهم: هیچ‌یک از سایر ویژگی‌های مربوط به مرز در CSS (که در فصل‌های بعدی خواهید آموخت) هیچ تأثیری نخواهند داشت مگر اینکه ویژگی border-style تنظیم شده باشد!