CSS - حاشیه‌های گرد (Rounded Borders)
خاصیت border-radius برای افزودن حاشیه‌های گرد به یک عنصر استفاده می‌شود:
مثال‌ها:
- حاشیه معمولی
- حاشیه گرد
- حاشیه گردتر
- حاشیه گردترین
مثال:
p {
border: 2px solid red;
border-radius: 5px;
}مثال‌های بیشتر
همه خواص حاشیه بالایی در یک اعلان
این مثال نحوه استفاده از خاصیت کوتاه برای تنظیم تمامی خواص حاشیه بالایی در یک اعلان را نشان می‌دهد.
تنظیم سبک حاشیه پایینی
این مثال نحوه تنظیم سبک حاشیه پایینی را نشان می‌دهد.
تنظیم عرض حاشیه چپ
این مثال نحوه تنظیم عرض حاشیه چپ را نشان می‌دهد.
تنظیم رنگ چهار حاشیه
این مثال نحوه تنظیم رنگ چهار حاشیه را نشان می‌دهد. می‌تواند از یک تا چهار رنگ داشته باشد.
تنظیم رنگ حاشیه راست
این مثال نحوه تنظیم رنگ حاشیه راست را نشان می‌دهد.
تمامی خواص حاشیه CSS
-
border: این خاصیت، تمامی خواص حاشیه را در یک اعلان تنظیم می‌کند. به عنوان مثال، می‌توان عرض، رنگ و سبک حاشیه را همزمان مشخص کرد.
-
border-bottom: این خاصیت، تمامی خواص حاشیه پایینی را در یک اعلان تنظیم می‌کند، شامل عرض، رنگ و سبک حاشیه پایین.
-
border-bottom-color: این خاصیت رنگ حاشیه پایینی را تنظیم می‌کند.
-
border-bottom-style: این خاصیت سبک حاشیه پایینی را تعیین می‌کند (مثلاً دات‌دار، خط‌دار، یا ساده).
-
border-bottom-width: این خاصیت عرض حاشیه پایینی را تنظیم می‌کند و می‌توان آن را با مقادیر مشخصی مانند px، em و … تعیین کرد.
-
border-color: این خاصیت رنگ چهار حاشیه (بالایی، پایینی، چپ و راست) را تنظیم می‌کند. می‌توان رنگ را به صورت نام، HEX، RGB یا HSL مشخص کرد.
-
border-left: این خاصیت، تمامی خواص حاشیه چپ را در یک اعلان تنظیم می‌کند.
-
border-left-color: این خاصیت رنگ حاشیه چپ را تنظیم می‌کند.
-
border-left-style: این خاصیت سبک حاشیه چپ را تعیین می‌کند.
-
border-left-width: این خاصیت عرض حاشیه چپ را تنظیم می‌کند.
-
border-radius: این خاصیت برای افزودن حاشیه‌های گرد به گوشه‌های یک عنصر استفاده می‌شود و می‌توان آن را با مقادیر مشخصی تنظیم کرد.
-
border-right: این خاصیت، تمامی خواص حاشیه راست را در یک اعلان تنظیم می‌کند.
-
border-right-color: این خاصیت رنگ حاشیه راست را تنظیم می‌کند.
-
border-right-style: این خاصیت سبک حاشیه راست را تعیین می‌کند.
-
border-right-width: این خاصیت عرض حاشیه راست را تنظیم می‌کند.
-
border-style: این خاصیت سبک چهار حاشیه (بالایی، پایینی، چپ و راست) را تعیین می‌کند.
-
border-top: این خاصیت، تمامی خواص حاشیه بالایی را در یک اعلان تنظیم می‌کند.
-
border-top-color: این خاصیت رنگ حاشیه بالایی را تنظیم می‌کند.
-
border-top-style: این خاصیت سبک حاشیه بالایی را تعیین می‌کند.
-
border-top-width: این خاصیت عرض حاشیه بالایی را تنظیم می‌کند.
-
border-width: این خاصیت عرض چهار حاشیه را تنظیم می‌کند و می‌توان آن را با مقادیر مشخصی یا مقادیر پیش‌فرض (نظیر نازک، متوسط و ضخیم) تعیین کرد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام