حاشیه‌ها (Border)

آشنایی با ویژگی‌های حاشیه در CSS: ضخامت، نوع، رنگ، گوشه‌های گرد و استایل‌های پیشرفته

حاشیه (Border) در CSS

حاشیه خطی است که دور عنصر را می‌گیرد و بین padding و margin قرار دارد. حاشیه یکی از بخش‌های مدل جعبه (Box Model) است.

سه ویژگی اصلی حاشیه

هر حاشیه دارای سه ویژگی است:

ویژگیتوضیحمثال
border-widthضخامت2px
border-styleنوع خطsolid
border-colorرنگred

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

.box {
        border-width: 2px;           /* همه طرف‌ها */
        border-width: 2px 5px;       /* عمودی افقی */
        border-width: 1px 2px 3px 4px; /* بالا راست پایین چپ */
    }

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

مقدارتوضیح
noneبدون حاشیه (پیش‌فرض)
solidخط ممتد ⭐
dashedخط چین
dottedنقطه چین
doubleخط دوبل
grooveسه‌بعدی شیاردار
ridgeسه‌بعدی برجسته
insetسه‌بعدی فرو رفته
outsetسه‌بعدی بیرون زده

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

.box {
        border-color: #3498db;
        border-color: red;
        border-color: rgba(0, 0, 0, 0.2);
    }

ویژگی خلاصه (Shorthand)

می‌توان هر سه ویژگی را در یک خط نوشت:

/* shorthand */
    .box {
        border: 2px solid #3498db;
    }
    
    /* معادل */
    .box {
        border-width: 2px;
        border-style: solid;
        border-color: #3498db;
    }

حاشیه برای هر طرف جداگانه

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

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

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

یکی از پرکاربردترین ویژگی‌های مدرن CSS:

/* گوشه‌های یکنواخت */
    .rounded {
        border-radius: 10px;
    }
    
    /* کاملاً گرد (دایره) */
    .circle {
        border-radius: 50%;
    }
    
    /* هر گوشه جداگانه */
    .card {
        border-radius: 10px 20px 30px 40px;
        /* بالا-چپ  بالا-راست  پایین-راست  پایین-چپ */
    }
    
    /* بیضی */
    .ellipse {
        border-radius: 50px / 25px;
    }

گوشه‌های گرد پیشرفته

/* فقط گوشه‌های بالا */
    .top-rounded {
        border-radius: 15px 15px 0 0;
    }
    
    /* فقط گوشه پایین چپ */
    .one-corner {
        border-bottom-left-radius: 20px;
    }
    
    /* دو گوشه روبرو */
    .blob {
        border-radius: 50% 10% 50% 10%;
    }

تصاویر حاشیه (border-image)

.fancy-border {
        border: 15px solid transparent;
        border-image: url("border.png") 30 round;
    }</code2>
    <p>این ویژگی امکان استفاده از تصویر به‌جای خط ساده را فراهم می‌کند.</p>
    
    <h2>تفاوت Border و Outline</h2>
    <table border="1" cellpadding="6">
    <tr><th>ویژگی</th><th>Border</th><th>Outline</th></tr>
    <tr><td>فضا اشغال می‌کند؟</td><td>✅ بله</td><td>❌ خیر</td></tr>
    <tr><td>تأثیر در Box Model</td><td>دارد</td><td>ندارد</td></tr>
    <tr><td>گوشه گرد</td><td>✅ دارد</td><td>✅ دارد (CSS3)</td></tr>
    <tr><td>هر طرف جداگانه</td><td>✅ بله</td><td>✅ بله</td></tr>
    </table>
    
    <h2>حاشیه‌های نامرئی برای رزرو فضا</h2>
    <pre><code>.btn {
        /* حاشیه نامرئی برای حفظ اندازه */
        border: 2px solid transparent;
    }
    
    .btn:hover {
        /* در hover رنگی می‌شود */
        border-color: #3498db;
    }

افکت‌های زیبا با Border

/* دکمه با گوشه و حاشیه */
    .btn-primary {
        border: 2px solid #3498db;
        border-radius: 25px;
        padding: 10px 30px;
        background: white;
        color: #3498db;
        transition: all 0.3s;
    }
    
    .btn-primary:hover {
        background: #3498db;
        color: white;
    }
    
    /* کارت با حاشیه متغیر */
    .card {
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 20px;
        transition: border-color 0.3s;
    }
    
    .card:hover {
        border-color: #3498db;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط