جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

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

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

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

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

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

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

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

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

2. border-style: solid;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

3. border-style: dotted;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

4. border-style: dashed;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

5. border-style: double;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

6. border-style: groove;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

7. border-style: ridge;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

8. border-style: inset;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

9. border-style: outset;

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

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

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

ساختار:

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

مثال:

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

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

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

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

مثال:

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

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

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

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

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

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

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