درس هفتم : حاشیه‌ها در CSS

حاشیه‌ها در CSS 

ویژگی‌های حاشیه (Border) در CSS به شما اجازه می‌دهند که استایل، پهنا و رنگ حاشیه یک عنصر را مشخص کنید.

۱. استایل حاشیه (border-style)

این ویژگی مشخص می‌کند که چه نوع حاشیه‌ای نمایش داده شود. نکته مهم: تا زمانی که این ویژگی تنظیم نشود، بقیه ویژگی‌های حاشیه (مثل پهنا و رنگ) تاثیری نخواهند داشت.

dotted (نقطه‌چین)
dashed (خط‌چین)
solid (یکپارچه)
double (دوتایی)
groove (شیاردار)
ridge (برجسته)
inset (فرورفته)
outset (بیرون‌زده)

۲. پهنای حاشیه (border-width)

این ویژگی ضخامت حاشیه را تنظیم می‌کند. می‌توانید از واحدهایی مثل px، pt، em یا کلمات thin، medium و thick استفاده کنید.

p {
border-style: solid;
border-width: 5px;
}

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

برای تنظیم رنگ حاشیه استفاده می‌شود. می‌توانید از نام رنگ، HEX، RGB یا HSL استفاده کنید.

حاشیه قرمز

۴. حاشیه‌های متفاوت برای هر جهت

شما می‌توانید برای هر سمت (بالا، راست، پایین، چپ) استایل متفاوتی در نظر بگیرید:

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

۵. مختصرنویسی حاشیه (Shorthand Property)

به جای نوشتن چندین خط، می‌توانید همه را در ویژگی border خلاصه کنید:

p {
border: 5px solid #04AA6D;
}

۶. حاشیه‌های گرد (Rounded Borders)

ویژگی border-radius برای اضافه کردن لبه‌های گرد به یک عنصر استفاده می‌شود:

p {
border: 2px solid red;
border-radius: 12px;
}

خروجی لبه گرد:

این عنصر دارای حاشیه با لبه‌های گرد است.

پایان فصل هفتم

در درس بعدی به مبحث بسیار حیاتی «فاصله بیرونی» (CSS Margins) می‌پردازیم.

درس قبلی
بازگشت به دوره
درس بعدی