سی‌اس‌اس/حاشیه

فاصله درونی

حاشیه

خط دور

سی‌اس‌اس

CSS Border (کادر یا حاشیه در CSS)

در CSS، ویژگی‌های مربوط به حاشیه (Border) به شما این امکان را می‌دهند که ظاهر مرزهای اطراف یک عنصر HTML را تعیین کنید. این ویژگی‌ها شامل نوع بوردر، ضخامت، رنگ و شعاع گوشه‌ها می‌باشند.

مروری سریع

ویژگی‌های اصلی مرز در CSS:

• border – ویژگی خلاصه برای تنظیم نوع، ضخامت و رنگ کادر

• border-style – نوع نمایش کادر

• border-width – ضخامت کادر

• border-color – رنگ کادر

• border-radius – گرد کردن گوشه‌های کادر

ویژگی border

ویژگی border یک ویژگی shorthand است که سه ویژگی زیر را به‌صورت هم‌زمان تنظیم می‌کند:

• border-width
• border-style (ضروری)
• border-color

مثال:

p {
border: 2px solid red;
}

• یک کادر با ضخامت 2px از نوع solid با رنگ red (قرمز)

ویژگی border-style

این ویژگی نوع کادر را تعیین می‌کند. مقادیر قابل قبول:

• none – بدون کادر
• hidden – کادر مخفی (وجود دارد و فضا اشغال میکند اما مخفی است)
• solid – کادر خطی یکدست
• dashed – کادر خط‌چین
• dotted – کادر نقطه‌چین
• double – کادر دوتایی
• groove – کادر برجسته فرورفته (۳D)
• ridge – کادر برجسته بیرون‌زده (۳D)
• inset – کادر فرورفته
• outset – کادر بیرون‌زده

استفاده از یک تا چهار مقدار برای جهت‌های مختلف:

/* چهار مقدار: بالا، راست، پایین، چپ */
border-style: dotted solid double dashed;

/* دو مقدار: بالا و پایین - راست و چپ */
border-style: solid dashed;

/* یک مقدار برای همه طرف‌ها */
border-style: solid;

ویژگی border-width

ضخامت مرز را تعیین می‌کند. می‌توان از واحدهایی مثل px، em یا کلمات کلیدی زیر استفاده کرد:

• thin
• medium
• thick

مثال:

p {
border-style: solid;
border-width: 5px 10px 3px 8px; /* بالا، راست، پایین، چپ */
}

ویژگی border-color

این ویژگی رنگ مرزها را تعیین می‌کند. می‌توان از انواع فرمت‌های رنگ استفاده کرد:

• نام رنگ: red, blue, ...
• مقدار HEX: #ff0000
• مقدار RGB: rgb(255, 0, 0)
• مقدار HSL: hsl(0, 100%, 50%)
• مقدار transparent برای مرز شفاف

مثال:

p {
border-style: solid;
border-color: red green blue yellow; /* بالا، راست، پایین، چپ */
}

ویژگی border-radius

برای گرد کردن گوشه‌های عنصر استفاده می‌شود.

مثال:

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

کادر جداگانه

CSS اجازه می‌دهد هر طرف کادر را به‌صورت جداگانه تنظیم کنید:

• border-top
• border-right
• border-bottom
• border-left

همچنین می‌توان هر طرف را به‌صورت مجزا با رنگ، ضخامت یا نوع تنظیم کرد:

p {
border-top-style: dotted;
border-right-width: 5px;
border-bottom-color: red;
}

ویژگی‌های shorthand برای هر طرف

می‌توانید برای هر طرف نیز از shorthand استفاده کنید:

div {
border-top: 2px solid blue;
border-left: 3px dotted green;
}

ویژگی‌های CSS Border

• border
• border-top
• border-right
• border-bottom
• border-left
• border-style
• border-width
• border-color
• border-radius