حاشیه‌ها در CSS

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

ضخامت حاشیه (border-width)

ویژگی border-width ضخامت خط حاشیه را تعیین می‌کند. مقدار آن معمولاً بر حسب پیکسل (px) نوشته می‌شود.

div{
    border-width: 3px; 
}

در این مثال، ضخامت حاشیه‌ی عنصر div برابر 3px تنظیم شده است.

نوع حاشیه (border-style)

ویژگی border-style نوع خط حاشیه را مشخص می‌کند. بدون تعیین این ویژگی، حاشیه اصلاً نمایش داده نمی‌شود. برخی از مقادیر رایج آن عبارت‌اند از:

• solid: خط پیوسته
• dashed: خط‌چین
• dotted: نقطه‌چین
• double: خط دوتایی
• none: بدون حاشیه (مقدار پیش‌فرض)

div{
    border-style: dashed; 
}

در این مثال، حاشیه‌ی عنصر div به‌صورت خط‌چین نمایش داده می‌شود.

رنگ حاشیه (border-color)

ویژگی border-color رنگ خط حاشیه را تعیین می‌کند. مقدار آن می‌تواند نام رنگ، کد هگزادسیمال یا مقادیر RGB باشد.

div{
    border-width: 3px;
    border-style: solid;
    border-color: seagreen;
}

در این مثال، عنصر div دارای حاشیه‌ای پیوسته، به ضخامت 3px و رنگ seagreen است.

ویژگی کوتاه‌شده‌ی border

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

div{
    border: 3px solid seagreen;
}

این خط دقیقاً همان نتیجه‌ی سه ویژگی جداگانه‌ی مثال قبل را ایجاد می‌کند، اما به‌صورت خلاصه‌تر نوشته شده است.

گردکردن گوشه‌های حاشیه (border-radius)

با ویژگی border-radius می‌توان گوشه‌های عنصر را گرد کرد. مقدار آن معمولاً بر حسب پیکسل یا درصد نوشته می‌شود.

div{
    border: 3px solid seagreen;
    border-radius: 10px;
}

در این مثال، علاوه بر حاشیه‌ی تعریف‌شده، گوشه‌های عنصر div نیز با شعاع 10px گرد شده‌اند. برای نمونه دور این متن میتوانید خروجی کد بالا را ببینید.