گرد کردن

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

مثال
1 p {
2   border: 2px solid red;
3   border-radius: 5px;
4 }


نکته: ویژگی border-radius در نسخه IE8 و نسخه‌های قدیمی‌تر پشتیبانی نمی‌شود.

مثال‌های بیشتر

تعریف تمامی ویژگی‌های کادر بالا در یک تعریف

این مثال نحوه استفاده از ویژگی مختصر را برای تنظیم تمامی ویژگی‌های کادر بالا در یک اعلان نشان می‌دهد.

تنظیم استایل کادر پایین

این مثال نحوه تنظیم استایل کادر پایین را نشان می‌دهد.

تنظیم عرض کادر سمت چپ

این مثال نحوه تنظیم عرض کادر سمت چپ را نشان می‌دهد.

تنظیم رنگ چهار کادر

این مثال نحوه تنظیم رنگ چهار کادر را نشان می‌دهد. کادر می‌تواند یک تا چهار رنگ داشته باشد.

تنظیم رنگ کادر سمت راست

این مثال نحوه تنظیم رنگ کادر سمت راست را نشان می‌دهد.

خودتان را با تمرین‌ها آزمایش کنید!

تمامی ویژگی‌های کادر در CSS

ویژگی توضیحات
border تمامی ویژگی‌های کادر را در یک تعریف تنظیم می‌کند
border-bottom تمامی ویژگی‌های کادر پایینی را در یک اعلان تنظیم می‌کند
border-bottom-color رنگ کادر پایینی را مشخص می‌کند
border-bottom-style استایل کادر پایینی را تنظیم می‌کند
border-bottom-width عرض کادر پایینی را مشخص می‌کند
border-color رنگ چهار ضلع کادر را تنظیم می‌کند
border-left تمامی ویژگی‌های کادر سمت چپ را در یک اعلان مشخص می‌کند
border-left-color رنگ کادر سمت چپ را مشخص می‌کند
border-left-style استایل کادر سمت چپ را مشخص می‌کند
border-left-width عرض کادر سمت چپ را مشخص می‌کند
border-radius تمامی چهار ویژگی 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 عرض چهار ضلع کادر را مشخص می‌کند


منابع آموزشی