Border (حاشیه) در CSS به ما امکان می‌دهد برای عناصر یک حاشیه (خط دور) ایجاد کنیم و آن را با ضخامت، نوع و رنگ مختلف سفارشی‌سازی کنیم.

این ویژگی برای جدا کردن بخش‌ها، ایجاد کارت‌ها، طراحی دکمه‌ها و استایل‌دهی حرفه‌ای استفاده می‌شود.

۱. نحوه تعریف Border در CSS

ویژگی border در CSS شامل سه مقدار اصلی است:

border: ضخامت نوع رنگ;

مثال ساده:

.box {
    border: 2px solid black;
}

🔹 نتیجه: یک حاشیه مشکی ۲ پیکسلی و خطی (solid) به عنصر اضافه می‌شود.

۲. مقادیر مختلف Border در CSS

✅ ۱. تنظیم ضخامت حاشیه (Border Width)

می‌توان ضخامت حاشیه را به روش‌های مختلفی تعیین کرد:

border-width: 5px;  /* ضخامت ثابت */
border-width: medium; /* ضخامت متوسط */
border-width: thin;  /* ضخامت کم */
border-width: thick; /* ضخامت زیاد */

🎯 مثال:

.box {
    border-width: 4px;
    border-style: solid;
    border-color: blue;
}

🔹 نتیجه: یک حاشیه ۴ پیکسلی آبی ایجاد می‌شود.

✅ ۲. انواع استایل‌های Border (Border Style)

border-style مشخص می‌کند که ظاهر خط حاشیه چگونه باشد.

border-style: solid;    /* خط ساده */
border-style: dashed;   /* خط چین */
border-style: dotted;   /* نقطه‌چین */
border-style: double;   /* دو خطی */
border-style: groove;   /* برجسته */
border-style: ridge;    /* فرورفته */
border-style: inset;    /* تو رفته */
border-style: outset;   /* بیرون زده */
border-style: none;     /* بدون حاشیه */

🎯 مثال: نمایش انواع Border

.border-solid {
    border: 3px solid black;
}

.border-dashed {
    border: 3px dashed red;
}

.border-dotted {
    border: 3px dotted blue;
}

.border-double {
    border: 3px double green;
}

🔹 نتیجه: این کلاس‌ها انواع مختلف حاشیه‌ها را نمایش می‌دهند.

✅ ۳. تنظیم رنگ حاشیه (Border Color)

رنگ Border می‌تواند با نام رنگ، مقدار HEX یا RGB تعیین شود.

border-color: red;   /* رنگ قرمز */
border-color: #ff5733;  /* رنگ HEX */
border-color: rgb(0, 128, 255); /* رنگ RGB */

🎯 مثال:

.box {
    border: 3px solid;
    border-color: red;
}

🔹 نتیجه: حاشیه قرمز خواهد شد.

۳. تنظیم Border برای هر طرف به‌صورت جداگانه

می‌توان برای هر سمت عنصر حاشیه‌ی متفاوتی تعیین کرد:

border-top: 3px solid red;     /* حاشیه بالا */
border-right: 5px dashed blue; /* حاشیه راست */
border-bottom: 2px dotted green; /* حاشیه پایین */
border-left: 4px double black; /* حاشیه چپ */

🎯 مثال:

.box {
    border-top: 5px solid blue;
    border-right: 3px dashed red;
    border-bottom: 2px dotted green;
    border-left: 4px double black;
}

🔹 نتیجه: هر سمت یک استایل متفاوت خواهد داشت.

۴. استفاده از border-radius برای ایجاد گوشه‌های گرد

ویژگی border-radius گوشه‌های یک عنصر را گرد می‌کند.

border-radius: 10px; /* گوشه‌های گرد */
border-radius: 50%; /* دایره‌ای کردن عنصر */

🎯 مثال:

.rounded-box {
    border: 3px solid black;
    border-radius: 15px;
}

🔹 نتیجه: حاشیه‌های عنصر گرد خواهد شد.

۵. خلاصه‌نویسی border در CSS

می‌توان به‌جای استفاده از border-width، border-style و border-color به‌صورت جداگانه، از خلاصه‌نویسی استفاده کرد.

border: 2px solid blue;

🔹 معادل:

border-width: 2px;
border-style: solid;
border-color: blue;

۶. استفاده از border-image برای ایجاد حاشیه‌های سفارشی

می‌توان از تصویر به‌عنوان Border استفاده کرد.

border-image: url("border.png") 30 round;

🔹 نتیجه: حاشیه با استفاده از تصویر سفارشی نمایش داده می‌شود.

۷. کاربردهای مهم Border در طراحی وب

✅ ایجاد جعبه‌های دارای حاشیه – برای تأکید روی بخش‌های خاص.
✅ طراحی دکمه‌های زیبا – ترکیب Border و border-radius.
✅ جدا کردن بخش‌های مختلف سایت – ایجاد جعبه‌های محتوا و کارت‌ها.
✅ افزایش خوانایی فرم‌ها – استفاده از حاشیه در فیلدهای ورودی.

🎯 مثال: استایل‌دهی دکمه‌ها با Border

.button {
    padding: 10px 20px;
    border: 2px solid blue;
    border-radius: 5px;
    background-color: white;
    color: blue;
    cursor: pointer;
}

.button:hover {
    background-color: blue;
    color: white;
}

🔹 نتیجه: دکمه دارای حاشیه آبی است و هنگام هاور شدن رنگ آن تغییر می‌کند.

۸. نتیجه‌گیری

✅ Border در CSS برای ایجاد حاشیه‌های سفارشی و زیبا به کار می‌رود.
✅ می‌توان ضخامت، نوع و رنگ حاشیه را تعیین کرد.
✅ با استفاده از border-radius می‌توان گوشه‌های گرد و دایره‌ای ایجاد کرد.
✅ امکان تنظیم حاشیه برای هر طرف به‌صورت جداگانه وجود دارد.
✅ با border-image می‌توان از تصویر برای ایجاد حاشیه استفاده کرد.