سلام رفیق! 👋 به جلسه نهم آموزش CSS رایا وردپرس خوش اومدی 🙂

آماده‌ای تا با دنیای جذاب حاشیه ها یا همون Borders توی CSS بیشتر آشنا بشیم؟ 🤔 حاشیه‌ها مثل قاب عکس برای محتوای وب‌سایت عمل می‌کنن. می‌تونن عناصر رو از هم جدا کنن، روی بخش‌های مهم تاکید کنن یا خیلی ساده، به طراحی‌ات زیبایی و جلوه‌ی بیشتری بدن.

توی این پست، قراره صفر تا صد کار با حاشیه در CSS رو یاد بگیری. از استایل‌های مختلف گرفته تا تنظیم ضخامت و رنگ، و حتی روش‌های خلاصه‌نویسی که کارت رو سریع‌تر می‌کنه. پس با من همراه باش!

🤔حاشیه (Border) در CSS چیست؟

قبل از اینکه بریم سراغ اصل مطلب، بذار یه توضیح کوتاه و جمع و جور بدم. هر عنصر HTML توی صفحه وب، مثل یه جعبه (Box Model) می‌مونه. این جعبه می‌تونه یه حاشیه دور خودش داشته باشه. CSS به ما این قدرت رو می‌ده که این حاشیه رو از هر نظر (رنگ، ضخامت، شکل و…) شخصی‌سازی کنیم.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

حالا بریم سراغ ویژگی‌های اصلی که برای کنترل حاشیه ها استفاده می‌شن که عبارتن از:

• border-style : شکل یا طرح خط دور لبه
• border-width : اندازه خط دور لبه
• border-color : رنگ خط دور لبه

1️⃣ ویژگی border-style: چه شکلی باشه حاشیه‌ات؟

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

👇 انواع سبک‌های حاشیه:

• solid: یه خط پیوسته و صاف. این معمول‌ترین استایله.
• dotted: خط حاشیه به‌صورت نقطه‌چین نمایش داده می‌شه. ⚫⚫⚫
• dashed: خط حاشیه به‌صورت خط‌چین نمایش داده می‌شه. ➖➖➖
• double: دو خط موازی کنار هم.
• groove: یه خط سه‌بعدی که انگار تو صفحه فرورفته.
• ridge: برعکس groove، انگار خط از صفحه اومده بیرون.
• inset: یه حاشیه سه‌بعدی که باعث می‌شه عنصر تو رفته به نظر بیاد.
• outset: برعکس inset، یه حاشیه سه‌بعدی که باعث می‌شه عنصر برجسته به نظر بیاد.
• none: هیچ حاشیه ای نمایش داده نمی‌شه (مقدار پیش‌فرض).
• hidden: مثل none هست، اما توی جداول یه رفتار خاص داره و برای حل تداخل حاشیه ها به کار میاد.

توجه! برای هر کدوم از حالت های محتلف border-style یه مثال ساده میزنم تا ببینی خروجی نهایی چه شکلی میشه. برای اینکه حاشیه‌ها خوب دیده بشن، توی همه‌ی مثال‌ها (به جز none)، یه ضخامت (border-width: 5px;) و یه رنگ قرمز (border-color:red; ) هم در نظر میگیرم.

1. border-style: none;

در این حالت، هیچ حاشیه‌ای نشون داده نمی‌شه (حتی اگه عرض و رنگ رو تعیین کنی).

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: هیچ خط یا حاشیه‌ای دور المان نمی‌بینی، انگار اصلاً حاشیه‌ای وجود نداره.

2. border-style: solid;

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: یه خط صاف و یکدست قرمز با ضخامت 5 پیکسل دور المان می‌بینی.

3. border-style: dotted;

حاشیه به صورت نقطه‌چین (نقطه‌های ریز گرد) نمایش داده می‌شه. ⚫⚫⚫

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: نقطه‌های قرمز ریز با فاصله از هم دور المان می‌بینی، مثل یه خط نقطه‌چین.

4. border-style: dashed;

حاشیه به صورت خط‌چین نمایش داده می‌شه. ➖➖➖

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: خط‌های کوتاه قرمز با فاصله از هم دور المان می‌بینی، شبیه خط‌چین.

5. border-style: double;

دو تا خط صاف و موازی کنار هم کشیده می‌شه.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: دو خط صاف قرمز کنار هم با یه فاصله کوچیک بینشون دور المان می‌بینی.

6. border-style: groove;

یه خط سه‌بعدی که انگار تو صفحه فرورفته.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: یه حاشیه تیره که انگار تو صفحه فرورفته، با سایه‌هایی که حس عمق می‌ده.

7. border-style: ridge;

برعکس groove، خطوط حاشیه انگار از صفحه اومده بیرون.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: یه حاشیه قرمز که انگار از صفحه بیرون زده، با سایه‌هایی که برعکس groove هستن.

8. border-style: inset;

کل المان انگار فرورفته.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: حاشیه قرمز که باعث می‌شه کل المان انگار تو صفحه فرو رفته باشه.

9. border-style: outset;

کل المان انگار برآمده.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خروجی: حاشیه قرمز که باعث می‌شه کل المان انگار از صفحه بیرون زده باشه.

نکته: برای اینکه حاشیه رو ببینی، باید حتماً border-style رو مشخص کنی (به جز none). اگه بخوای، می‌تونی برای هر طرف المان (بالا، راست، پایین، چپ) یه سبک متفاوت بذاری، مثلاً:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

2️⃣ ویژگی border-width: حاشیه‌ات چقدر ضخیم باشه؟

حالا که سبک حاشیه‌ات رو انتخاب کردی، وقتشه بگی چقدر ضخیم یا نازک باشه. ویژگ border-width این کار رو برات می‌کنه.

مقادیر ممکن برای border-width :

• پیکسل: مثل 1px, 5px (دقیق و دلخواه).
• کلمات کلیدی:
  • thin (نازک)
  • medium (متوسط)
  • thick (ضخیم)

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

در مثال بالا یه حاشیه صاف با ضخامت 4 پیکسل دور div می‌بینی.

یه ترفند باحال: می‌تونی برای هر طرف (بالا، راست، پایین، چپ) یه ضخامت جدا و دلخواه تعیین کنی:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

نکته: ترتیب همیشه ساعت‌گرد شروع از بالاست: بالا → راست → پایین → چپ.

3️⃣ ویژگی border-color: حاشیه‌ات چه رنگی باشه؟

حالا که شکل و ضخامت حاشیه‌ات رو تعیین کردی، نوبت رنگشه! با border-color می‌تونی هر رنگی که دوست داری به حاشیه‌ات بدی.

مقادیر ممکن برای border-color:

• اسم رنگ: مثل red.
• کد هگز: مثل #ff5733 (برای رنگ نارنجی).
• RGB: مثل rgb(255, 87, 51) (نارنجی).
• RGBA: مثل rgba(255, 87, 51, 0.5) (نارنجی با شفافیت).

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

در مثال بالا یه حاشیه صاف 2 پیکسلی قرمز دور div کشیده میشه.

رنگ متفاوت برای هر طرف: اگه میخای تمام خطوط حاشیه یه رنگ ثابت نداشته باشن و هر جهت یه رنگ متفاوت داشته باشه میتونی به صورت زیر بنویسی که ترتیبش ساعتگرده یعنی رنگ اول برای بالا، رنگ دوم راست، رنگ سوم پایین و رنگ آخری برای حاشیه سمت چپ خواهد بود

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خلاصه‌نویسی ویژگی Border: همه رو با هم بنویس! ✍️

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

ساختار:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

مثال:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

این یه حاشیه خط‌چین 3 پیکسلی سبز دور div می‌کشه. ساده و سریع!

نکته: اگه یه مقدار رو ننویسی (مثلاً رنگ)، پیش‌فرضش اعمال می‌شه. ولی بدون تعیین border-style هیچی نمی‌بینی.

استایل نوشتن برای یک جهت خاص: فقط یه طرف رو تغییر بده! 🧭

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

• border-top: حاشیه بالا
• border-right: حاشیه راست
• border-bottom: حاشیه پایین
• border-left: حاشیه چپ

مثال:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

این کد فقط زیر div یه خط صاف آبی می‌کشه.

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

نکته: می‌تونی برای هر جهت جداگانه سبک، عرض و رنگ بذاری.

😮 ویژگی‌ پیشرفته‌ تر برای حاشیه‌ها

حالا که اصول رو یاد گرفتی، بیا یه ویژگی باحال‌تر از بردر یا حاشیه رو ببینیم.

✔️ border-radius: گوشه‌های نرم و قشنگ

با border-radius می‌تونی گوشه‌های حاشیه‌ات رو گرد و نرم تر کنی. این برای دکمه‌ها و کارت‌ها عالیه.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

اینجا گوشه‌ها 8 پیکسل گرد می‌شن.

جمع‌بندی: حالا استاد حاشیه‌ها شدی! 😁

خب، دیگه همه‌چیز رو درباره حاشیه‌ها یا Borders در CSS یاد گرفتی! از border-style برای شکل، border-width برای ضخامت، border-color برای رنگ، تا خلاصه‌نویسی و استایل‌دهی به یه جهت خاص.

فقط یادت باشه با مثال‌ها تمرین کنی تا دستت راه بیفته. اگه سوالی داشتی، تو کامنت‌ها بپرس، با کمال میل کمکت می‌کنم! 😊 موفق باشی و طراح های قشنگ بسازی! 🌈

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

جلسه 18 آموزش CSS: لیست ها (List) در CSS

مطالعه

جلسه 23 آموزش CSS: نحوه اولویت بندی عناصر در CSS

مطالعه