قاب ها و حاشیه ها. دو حاشیه با استفاده از CSS

ولاد مرژویچ

با استفاده از CSS می توانید به روش های مختلفی به یک عنصر حاشیه اضافه کنید. البته، اساساً از ویژگی border، به عنوان همه کاره ترین، و همچنین طرح کلی و در کمال تعجب، box-shadow استفاده می شود که وظیفه اصلی آن ایجاد سایه است. بیایید نگاهی به این روش ها و تفاوت های آنها بیندازیم.

مشخصات کلی

ساده ترین ویژگی برای ایجاد فریم. پارامترهای آن مشابه مرز است، اما در برخی جزئیات به طور قابل توجهی با آن تفاوت دارد:

• طرح کلی در اطراف عنصر ترسیم شده است (حاشیه داخل).
• طرح کلی بر اندازه عنصر تأثیر نمی گذارد (حاشیه به عرض و ارتفاع عنصر اضافه می شود).
• طرح کلی را فقط می توان در اطراف کل عنصر تنظیم کرد، نه در طرف های جداگانه (حاشیه را می توان در هر طرف یا همه به یکبار استفاده کرد).
• طرح کلی تحت تأثیر شعاع گرد مشخص شده توسط ویژگی border-radius قرار نمی گیرد (این روی مرز تأثیر می گذارد).

این سؤال مطرح می شود - در چه مواردی به طرح کلی نیاز است، زمانی که نقش آن، با وجود تفاوت های ذکر شده، به طور کامل توسط مرز برعهده می گیرد؟ موقعیت های زیادی وجود ندارد، اما آنها رخ می دهند:

• ایجاد قاب های پیچیده چند رنگ؛
• افزودن یک فریم به یک عنصر هنگام نگه داشتن ماوس روی آن با نشانگر ماوس؛
• پنهان کردن قاب اضافه شده به طور خودکار توسط مرورگر برای برخی از عناصر هنگام دریافت فوکوس؛
• برای طرح کلی، می توانید فاصله لبه یک عنصر تا مرز را با استفاده از ویژگی outline-offset تعیین کنید تا یک .

قاب های چند رنگ

همانطور که در مثال 1 نشان داده شده است باید درک کرد که طرح کلی به هیچ وجه جایگزین مرز نمی شود و ممکن است با آن وجود داشته باشد.

مثال 1: یک قاب ایجاد کنید

در این مثال، یک حاشیه سیاه در اطراف عنصر اضافه شده است که با یک حاشیه سفید از پس زمینه جدا می شود (شکل 1).

برنج. 1. حاشیه اطراف عنصر

قاب هنگام استفاده: شناور

افزودن یک حاشیه در سراسر حاشیه، عرض عنصر را افزایش می دهد، که هنگام ترکیب مرز و کلاس شبه hover کاملاً قابل توجه است. دو راه برای "برنده شدن" وجود دارد. ساده ترین کار این است که حاشیه را با یک طرح کلی جایگزین کنید، که می دانیم هیچ تاثیری بر اندازه عنصر ندارد (مثال 2).

مثال 2: قاب در حالت شناور

طرح کلی همیشه مناسب نیست، فقط به این دلیل که گوشه های گرد بر آن تأثیر نمی گذارد. روش دوم در اینجا مناسب است - یک حاشیه نامرئی یا حاشیه ای که با رنگ پس زمینه مطابقت دارد اضافه کنید و سپس پارامترهای آن را در شناور تغییر دهید (مثال 3). سپس هیچ جابجایی عنصر رخ نخواهد داد، زیرا قاب در ابتدا وجود دارد. اما همیشه به یاد داشته باشید که عرض عنصر مجموع مقادیر عرض، حاشیه در سمت چپ و حاشیه در سمت راست است. در مورد ارتفاع هم همینطور است.

مثال 3: قاب در حالت شناور

حاشیه اطراف فیلدهای فرم

در برخی از مرورگرها (Chrome، Safari، نسخه های اخیر Opera)، یک حاشیه رنگی کوچک در اطراف فیلدهای فرم هنگام دریافت فوکوس نمایش داده می شود (شکل 2). برای حذف آن کافی است مانند مثال 4 مقدار none را به ویژگی outline در استایل ها اضافه کنید.

برنج. 2. در اطراف زمینه ها قاب کنید

مثال 4. قاب را بردارید

فریم ها از طریق جعبه سایه

اگرچه خاصیت box-shadow برای افزودن سایه به اطراف یک عنصر در نظر گرفته شده است، اما می‌توان از آن برای ایجاد حاشیه‌ها و مواردی که با border یا outline قابل انجام نیستند نیز استفاده کرد. این به این دلیل است که تعداد سایه ها می تواند نامحدود باشد که پارامترهای آنها با کاما از هم جدا شده اند.

برای به دست آوردن یک فریم، سه پارامتر اول باید روی صفر تنظیم شوند، آنها مسئول موقعیت سایه و تاری آن هستند. پارامتر چهارم در این مورد مسئول ضخامت حاشیه است و پارامتر پنجم رنگ قاب را تعیین می کند. برای فریم دوم، پارامتر چهارم برابر است با مجموع ضخامت های دو قاب.

مثال 4 نشان می دهد که چگونه می توان دو کادر و یک حاشیه را با استفاده از یک ویژگی box-shadow به سمت راست اضافه کرد.

مثال 4: استفاده از box-shadow

نتیجه این مثال در شکل نشان داده شده است. 3.

برنج. 3. فریم های ایجاد شده توسط ویژگی box-shadow

ویژگی مرزی CSS برای ایجاد مرز یک شی، یعنی برای ضخامت حاشیه، برای رنگ و سبک آن تنظیم می شود. این ویژگی به طور گسترده در HTML استفاده می شود. برای درک بهتر محتوای صفحه می توانید افکت های مختلفی ایجاد کنید. به عنوان مثال، یک نوار کناری، هدر سایت، منو و غیره طراحی کنید.

1. نحو مرزی CSS

مرز: حاشیه به سبک حاشیه-رنگ | به ارث می برند;

• border-width - عرض حاشیه. می توانید آن را در پیکسل (px) تنظیم کنید یا از مقادیر استاندارد نازک، متوسط، ضخیم استفاده کنید (فقط در عرض پیکسل متفاوت هستند)
• سبک حاشیه - سبک قاب رندر شده. می تواند مقادیر زیر را بگیرد
  • هیچ یا پنهان - مرز را لغو می کند
  • نقطه چین - قاب نقطه چین
  • خط تیره - قاب خط تیره
  • خط جامد - ساده (بیشتر استفاده می شود)
  • قاب دوتایی - دوتایی
  • groove - حاشیه 3 بعدی شیاردار
  • برآمدگی، درونی، ابتدایی - جلوه‌های قاب سه بعدی مختلف
  • ارث بری - مقدار عنصر والد اعمال می شود
• border-color - رنگ حاشیه. می توان با استفاده از یک نام رنگ خاص یا در قالب RGB مشخص کرد (به نام رنگ های html برای سایت مراجعه کنید)

توجه داشته باشید

مقادیر موجود در ویژگی مرزی CSS را می توان به هر ترتیبی تنظیم کرد. متداول ترین دنباله استفاده شده "رنگ سبک ضخامت" است.

2. نمونه هایی با مرزهای مختلف CSS

2.1. مثال. سبک های مختلف حاشیه به سبک حاشیه

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):

ویژگی border-width مسئول پهنای کادر، خاصیت border-style مسئول استایل کادر و border-color رنگ کادر است. با خواص اول و سوم همه چیز مشخص است. تمام مقادیری که ویژگی border-style می تواند بگیرد در شکل زیر نشان داده شده است:

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

من ورودی طولانی مرز CSS را به شما نشان دادم (این ورودی بسیار دست و پا گیر است و معمولاً هیچکس از آن استفاده نمی کند). همه دستورالعمل ها می توانند در یک خط قرار بگیرند. در مورد ما، به این صورت خواهد بود:

حاشیه: 1 پیکسل قرمز جامد.

آن ها ابتدا ضخامت قاب را مشخص می کنیم سپس سبک و رنگ فریم را مشخص می کنیم.

احتمالاً متوجه شده اید که قاب در چهار طرف ظاهر می شود. فریم ها را می توان برای هر یک از اضلاع به طور جداگانه تنظیم کرد (در یک مثال خاص مشخص خواهد شد):

حاشیه بالا: 2px قرمز جامد. حاشیه-پایین: 3 پیکسل سبز نقطه‌دار. لبه سمت چپ: 6 پیکسل با خط زرد. حاشیه سمت راست: 5px double #fe54e5;

می بینید که هر 4 طرف فریم های متفاوتی دارند. اگر برای یک طرف قاب تنظیم نکنید، بر این اساس، قاب وجود نخواهد داشت.

قاب‌ها کاملاً در همه جا استفاده می‌شوند: پیدا کردن طراحی وب‌سایتی که از قاب استفاده نمی‌کند تقریباً دشوار است. اغلب، آیتم های منو با یک خط عمودی از هم جدا می شوند که فقط با ویژگی حاشیه-راست یا حاشیه-چپ تنظیم می شود. همچنین می توانید افکت های جالبی روی لینک ها ایجاد کنید. تکالیف فقط در مورد این موضوع:

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

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

این ویژگی یک حاشیه در اطراف یک عنصر ایجاد می کند. اطلاعات بیشتر در مورد این ملک را می توانید در لینک بخوانید و در این مقاله به طور کلی نحوه عملکرد آن را شرح خواهم داد. این اطلاعات برای درک نحوه ایجاد حاشیه با CSS کافی خواهد بود.

نحو برای ویژگی border ساده است: border: 1px solid black; . این ویژگی سه مقدار دارد:

• 1px - ضخامت حاشیه.
• توپر - نوع قاب، توپر - خط یکدست، دوتایی - دوتایی توپر، خط چین - نقطه چین. چندین نوع دیگر از حاشیه ها وجود دارد که می توانید اطلاعات مربوط به آنها را در اینجا بیابید: CSS border .
• سیاه - رنگ حاشیه را تعیین می کند. رنگ ها را می توان با نام تنظیم کرد، مقادیر معتبر اینجا هستند: جدول رنگی CSS یا کد هگزادسیمال. نحوه انجام این کار در مقاله نوشته شده است: Colors in CSS.

قاب متن CSS

در اینجا نمونه ای از استفاده از ویژگی border برای ایجاد حاشیه ای با عرض یک پیکسل و سیاه است:

به این پاراگراف کلاس مثال-1 اختصاص داده شده است.

در این مثال از ویژگی CSS padding یا padding نیز استفاده کرده ایم. این ویژگی اندازه تورفتگی را از متن به stroke (حاشیه عنصر) تنظیم می کند.

بیایید به یک مثال ساده دیگر نگاه کنیم، فقط برای درک آن. بیایید یک حاشیه با عرض سه پیکسل، رنگ قرمز و بدون padding ایجاد کنیم (ویژگی CSS padding).

به این پاراگراف کلاس مثال-2 داده شده است.

همانطور که می بینیم، بدون padding، قاب متن شاخدار به نظر می رسد.

چگونه یک تصویر را در CSS قاب کنیم

قاب های عکس با استفاده از ویژگی border به همین ترتیب تنظیم می شوند. بیایید یک حاشیه سبز رنگ 4 پیکسلی برای تصویر ایجاد کنیم.

Example-img (حاشیه: 4px سبز ثابت؛ )

در اینجا نحوه کار این کد آمده است:

نحوه گرد کردن گوشه های حاشیه در CSS

گرد کردن گوشه های حاشیه در CSS با ویژگی border-radius انجام می شود. این ویژگی در CSS3 معرفی شد و در تمام مرورگرهای مدرن کار می کند.

ویژگی border-radius می تواند یک تا چهار مقدار داشته باشد. اگر مقدار یک باشد، درجه گرد شدن را برای تمام گوشه ها تعیین می کند. بیایید مثالی از نحوه عملکرد این ویژگی با یک مقدار ارائه دهیم.

مثال-3 (حاشیه: 1 پیکسل سیاه و سفید، شعاع حاشیه: 15 پیکسل؛ بالشتک: 10 پیکسل؛ )

هم اکنون به چگونگی کارکرد آن می پردازیم:

ویژگی border-radius: 15px.>

اگر بلوک هیچ حاشیه ای نداشته باشد، عرض مرز وجود دارد: 0; ، سپس ناحیه پر شده با رنگ پس زمینه گرد می شود (ویژگی پس زمینه-رنگ). به عنوان مثال:

مثال-4 (عرض حاشیه: 0؛ // اگرچه این مقدار به صورت پیش‌فرض رنگ پس‌زمینه 0 است: #DDD؛ شعاع حاشیه: 15 پیکسل؛ بالشتک: 10 پیکسل؛ )

در اینجا نحوه کار این مثال آمده است:

ویژگی border-radius: 15px.>

همانطور که قبلا نوشتم، ویژگی border-radius را می توان از یک تا چهار مقدار تنظیم کرد. جدول زیر نحوه عملکرد همه ترکیبات مقادیر را توضیح می دهد.

برای ویژگی border-radius، مقادیر را می توان به صورت درصد مشخص کرد.

بیایید یک دایره در CSS رسم کنیم. برای انجام این کار، یک بلوک مربعی به ابعاد 100 در 100 پیکسل بردارید و گوشه ها را با قانون CSS حاشیه-شعاع: 50% گرد کنید.

مثال-5 (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ رنگ پس‌زمینه: #F00؛ شعاع حاشیه: 50 درصد؛ )

در اینجا نحوه کار این مثال آمده است:

در مورد این موضوع "فریم ها در CSS" به طور کامل افشا شده است. موفق باشید در یادگیری CSS!

ویژگی border generic برای کنترل مرز یک عنصر استفاده می شود. این ویژگی به شما امکان می دهد عرض، سبک و رنگ حاشیه یک عنصر را در یک اعلان تنظیم کنید.

این سه ویژگی (عرض، سبک و رنگ حاشیه) را می توان در یک اعلان تنظیم کرد. به عنوان مثال:

شما فقط می توانید یک سبک حاشیه را در یک طرف یک عنصر مشخص کنید. برای انجام این کار، از ویژگی های border-top (حاشیه بالا)، border-right (حاشیه سمت راست)، border-bottom (مرز پایین)، border-left (حاشیه چپ) استفاده کنید.

در این مثال، هر طرف بلوک ضخامت، سبک و رنگ خود را دارد.

استفاده از CSS را برای ایجاد شکلی مانند زیر در نظر بگیرید:

مقادیر حاشیه - ضخامت، سبک و رنگ - را می توان به طور جداگانه با استفاده از ویژگی های خاص تنظیم کرد.

• border-style - سبک حاشیه.
• border-width - عرض حاشیه.
• border-color - رنگ حاشیه.

بیایید هر یک از مقادیر را جداگانه در نظر بگیریم.

اموال به سبک مرزی. سبک حاشیه.

ویژگی border-style سبک حاشیه را تنظیم می کند. در CSS، بر خلاف HTML، حاشیه یک عنصر می تواند فراتر از یک جامد باشد. مقادیر معتبر برای سبک حاشیه عبارتند از:

1. هیچ - بدون حاشیه (پیش فرض).
2. جامد - حاشیه جامد.
3. حاشیه دوتایی
4. نقطه چین - حاشیه.
5. نقطه چین - حاشیه ای که از یک سری نقطه تشکیل شده است.
6. خط الراس - مرز "رج".
7. شیار - مرز "شیار".
8. inset - حاشیه درج شده.
9. ابتدا - مرز اکسترود شده.

نمونه هایی از ظاهر آنها

بدون مرز (هیچ)

حاشیه جامد (جامد)

حاشیه دوتایی (دوبل)

حاشیه نقطه چین (نقطه دار)

حاشیه نقطه چین (چین)

حاشیه شیار (شیار)

حاشیه خط الراس

حاشیه تورفته (در داخل)

حاشیه اکسترود شده (ابتدا)

ضمناً اگر رنگ حاشیه را برای قاب رج روی مشکی قرار دهید، نتیجه زیر را خواهید گرفت.

بلوک div با حاشیه سیاه و سبک خط الراس.

حاشیه به نظر جامد است، اما دلیل آن این است که سبک رج با افزودن یک افکت سایه سیاه ایجاد می‌شود و افکت سیاه روی حاشیه سیاه قابل مشاهده نیست.

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

یک مقدار (جامد) - سبک حاشیه برای همه طرف های بلوک تنظیم شده است.

دو مقدار (دبل جامد) - مقدار اول استایل را برای دو طرف بالا و پایین تنظیم می کند، دومی برای طرف.

سه مقدار (دو نقطه جامد) - مقدار اول برای سمت بالا، دومی برای طرفین، سومین مقدار برای پایین.

چهار مقدار (دبل نقطه چین یکدست) - هر مقدار برای یک طرف در جهت عقربه های ساعت از بالا.

ویژگی عرض مرز. ضخامت حاشیه - ضخامت لبه.

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

مانند ویژگی border-style، ویژگی را نیز می توان روی یک تا چهار مقدار تنظیم کرد. برای هر مورد مثال هایی را در نظر بگیرید.

کد مثال:

همچنین مقادیر کلیدواژه برای خاصیت border-width وجود دارد. در کل سه مورد وجود دارد:

• نازک - حاشیه نازک؛
• ضخامت متوسط ​​- متوسط؛
• حاشیه ضخیم - ضخیم؛

ضخامت حاشیه: نازک.

ضخامت حاشیه: متوسط.

ضخامت حاشیه: ضخیم.

ویژگی رنگ حاشیه. رنگ لبه.

امکانات حاشیه رنگ برای کنترل رنگ حاشیه استفاده می شود. رنگ‌های این ویژگی را می‌توان با استفاده از هر یک از روش‌های توضیح داده شده در مقاله Colors در CSS تنظیم کرد، یعنی:

• نماد هگزادسیمال (#ff00aa) رنگ.
• فرمت RGB rgb (255,12,110) است. فرمت RGBA برای CSS3.
• فرمت های HSL و HSLA برای CSS3.
• نام رنگ، به عنوان مثال سیاه و سفید (مشکی). برای لیست کاملی از نام رنگ ها، به جدول CSS Color Names مراجعه کنید.

ویژگی border-color همچنین می تواند یک تا چهار مقدار داشته باشد و آنها را مشابه ویژگی های قبلی رفتار کند.

یک مقدار (قرمز).

دو مقدار (قرمز سیاه).

سه مقدار (قرمز سیاه زرد).

چهار مقدار (قرمز مشکی زرد آبی).

حالا بیایید به وظیفه ای که در بالا گفته شد برگردیم و یک شکل بکشیم:

در اینجا کدی است که چنین شکلی را ترسیم می کند، فقط بزرگتر:

تنظیم مقادیر برای طرفین به طور جداگانه

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

• حاشیه بالا (حاشیه بالا)
• حاشیه راست (حاشیه سمت راست)
• حاشیه پایین (حاشیه پایین)
• حاشیه چپ (حاشیه چپ)

اجازه دهید یادآوری کنم که برای همه ویژگی ها، سه مقدار (ضخامت، سبک و رنگ) به هر ترتیب مشخص شده است. اما ویژگی هایی وجود دارد که به شما امکان می دهد ضخامت، رنگ و سبک را برای هر طرف جداگانه تنظیم کنید. نگارش این خواص برگرفته از مطالب فوق است.

گزینه های حاشیه بالا (border-top).

• border-top-color - رنگ حاشیه بالایی یک عنصر را تنظیم می کند.
• border-top-width - عرض حاشیه بالایی یک عنصر را تنظیم می کند.
• border-top-style - سبک حاشیه بالایی عنصر را تنظیم می کند.

گزینه های حاشیه سمت راست (حاشیه-راست).

• border-right-color - رنگ حاشیه سمت راست عنصر را تعیین می کند.
• border-right-width - عرض حاشیه سمت راست عنصر را تنظیم می کند.
• border-right-style - سبک حاشیه سمت راست عنصر را تنظیم می کند.

گزینه های حاشیه پایین (حاشیه-پایین).

• border-bottom-color - رنگ حاشیه پایین یک عنصر را تنظیم می کند.
• border-bottom-width - عرض حاشیه پایین یک عنصر را تنظیم می کند.
• border-bottom-style - سبک حاشیه پایین یک عنصر را تنظیم می کند.

گزینه های حاشیه سمت چپ (حاشیه-چپ).

• border-left-color - رنگ حاشیه سمت چپ عنصر را تعیین می کند.
• border-left-width - عرض حاشیه سمت چپ عنصر را تنظیم می کند.
• border-left-style - سبک حاشیه سمت چپ عنصر را تنظیم می کند.

نمونه ای از استفاده از این ویژگی ها:

ویژگی مرزی شعاع. گرد کردن گوشه های مرز.

ویژگی border-radius برای گرد کردن گوشه‌های مرزهای یک عنصر است. این ویژگی در CSS3 معرفی شده است و در تمام مرورگرهای مدرن به جز اینترنت اکسپلورر 8 (و نسخه های قدیمی تر) به درستی کار می کند.

مقادیر می توانند هر عددی باشد که در CSS استفاده می شود.

شعاع مرزی: 15 پیکسل.

اگر قاب بلوک تنظیم نشده باشد، گرد کردن پس‌زمینه اتفاق می‌افتد. در اینجا نمونه ای از گرد کردن بلوک بدون حاشیه اما با رنگ پس زمینه آورده شده است:

شعاع مرزی: 15 پیکسل.

ویژگی هایی برای گرد کردن هر گوشه جداگانه یک عنصر وجود دارد. این مثال از همه آنها استفاده می کند:

شعاع حاشیه-بالا-چپ: 15 پیکسل؛ حاشیه-بالا-راست-شعاع: 0; حاشیه-پایین-راست-شعاع: 15 پیکسل. شعاع حاشیه-پایین-چپ: 0;

شعاع مرزی: 15 پیکسل.

اگرچه این کد را می توان در یک اعلان نوشت: border-radius : 15px 0 15px 0 . واقعیت این است که برای ویژگی border-radius، می توانید از یک تا چهار مقدار تنظیم کنید. جدول زیر به طور خلاصه قوانین حاکم بر چنین اظهاراتی را نشان می دهد.

با مطالعه دقیق این جدول می توانید متوجه شوید که کوتاه ترین ورودی برای سبک مورد نظر این خواهد بود: border-radius : 15px 0 . فقط دو مقدار وجود دارد.

کمی تمرین

با استفاده از CSS یک لیمو بکشید.

در اینجا کد چنین بلوکی آمده است:

حاشیه: 0 خودکار; /* بلوک را در مرکز */ عرض: 200 پیکسل. ارتفاع: 200 پیکسل؛ پس زمینه: #F5F240; حاشیه: 1px جامد #F0D900; حاشیه شعاع: 10 پیکسل 150 پیکسل 30 پیکسل 150 پیکسل.

ما قبلاً شکل را ترسیم کرده ایم:

حالا بیایید یک مثلث از آن باقی بگذاریم:

کد مثلث این است:

حاشیه: 0 خودکار; /* بلوک را در مرکز قرار دهید */ padding: 0px; عرض: 0 پیکسل ارتفاع: 0; حاشیه: 30 پیکسل سفید جامد؛ رنگ حاشیه پایین: قرمز؛