در حال بارگذاری...

حاشیه (Border) در CSS

پر کردن، عکس، گرادیان و محو نرم را بلدید. مهارت بعدی: لبهٔ جعبه را بکشید. حاشیه (border) همان خطی است که دور عنصر می‌نشیند — کارت، دکمه، فیلد و پنل همه به آن تکیه می‌کنند.

حاشیه چیست؟

حاشیهٔ CSS روی لبهٔ جعبهٔ عنصر می‌نشیند. سه جزء دارد: ضخامت (چقدر پهن)، استایل (چه شکلی — توپر، خط‌چین و بقیه)، و رنگ. استایل را جا بیندازید؛ خیلی وقت‌ها حتی با ضخامت هم خط دیده نمی‌شود.

سه جزء

هر حاشیه را مثل دستور پخت کوتاه ببینید: ضخامت + شکل + رنگ.

عرض، استایل و رنگ جدا

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

چرا استایل مهم است؟

فقط border-width کافی نیست. بدون border-style غیر از مقدار اولیهٔ none معمولاً خطی نمی‌بینید. اول با solid شروع کنید؛ بعد سراغ شکل‌های دیگر بروید.

میان‌بر: یک خط به‌جای سه تا

میان‌بر border ضخامت، استایل و رنگ را با هم می‌گیرد. ترتیب روزمرهٔ رایج: ضخامت → استایل → رنگ.

میان‌بر border

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

استایل‌های رایج حاشیه

استایل، شخصیت خط است. اول یک مجموعهٔ کوچک روزمره را حفظ کنید.

📊 مقدارهای رایج border-style

کلیدواژه ظاهر استفادهٔ روزمره
solid خط پیوسته کارت، دکمه، فیلد فرم
dashed خط‌چین کوتاه راهنمای جای خالی، «اینجا رها کنید»
dotted نقطه‌نقطه جداکنندهٔ نرم، قاب ملایم
double دو خط موازی تأکید تزئینی (کم استفاده کنید)
none حاشیه کشیده نمی‌شود پاک‌کردن / ریست لبه
hidden شبیه none در جمع شدن حاشیهٔ جدول جدول‌ها بعداً — فقط اسمش را بشناسید

چند استایل کنار هم

ضخامت و رنگ یکی؛ فقط استایل عوض می‌شود.

توپر، خط‌چین، نقطه‌ای، دوتایی

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

هر ضلع جدا

بالا، راست، پایین و چپ را جدا می‌توانید استایل کنید — برای خط زیر، نوار تأکیدی چپ، یا کارت ناهمگون مفید است.

حاشیهٔ هر ضلع

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

میان‌بر برای یک ضلع

border-left: 4px solid #0f766e همان راه روزمره است: یک لبه را می‌زنید، بقیه دست‌نخورده می‌مانند.

عادت کارت ساده

حاشیهٔ نازک + فاصلهٔ داخلی + پر ملایم، کارت را واضح می‌کند بدون داد و بیداد.

کارت با حاشیهٔ ساده

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* گردی گوشه درس بعد است — اینجا گوشه صاف بماند */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

برداشتن حاشیه

برای پاک کردن، border: none (یا border-style: none) را ترجیح بدهید. فقط border-color: transparent گاهی هنوز جا/ضخامت می‌گذارد — none ریست تمیز است.

ریست با border none

css
CSS Code 
.plain {
border: none;
}

خودتان امتحان کنید

  1. کارت با border-width، border-style: solid و border-color فیروزه‌ای.
  2. همان ظاهر را با border: 2px solid #0f766e بنویسید.
  3. چهار جعبه: solid، dashed، dotted و double با ضخامت یکسان.
  4. بلوک نقل‌قول فقط با حاشیهٔ ضخیم چپ.
  5. از دکمهٔ حاشیه‌دار شروع کنید؛ لبه را با border: none بردارید.

اشتباهات رایج

  • ضخامت و رنگ گذاشتن و یادتان رفتن border-style (پس چیزی دیده نمی‌شود)
  • قاطی کردن border (لبهٔ کشیده‌شده) با margin (فاصلهٔ بیرونی) — دو ابزار جدا
  • انتظار گوشهٔ گرد فقط از border — آن کار border-radius است (درس بعد)
  • هر ضلع را بی‌دلیل رنگ جیغ زدن
  • حاشیهٔ ضخیم شفاف گذاشتن وقتی منظورتان border: none بود

خلاصه

  • حاشیه به ضخامت، استایل و رنگ نیاز دارد
  • border: 2px solid #0f766e میان‌بر روزمره است
  • اول solid، dashed، dotted، double و none را یاد بگیرید
  • وقتی طرح بخواهد، اضلاع را جدا استایل کنید
  • با border: none تمیز ریست کنید
  • فعلاً گوشه‌ها صاف — گرد کردن مال درس بعد است

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
9
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Css آموزش