آموزش کادرهای گرد شده در CSS

Ratings

(0)

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

گوشه ی کادر عادی

گوشه ی کادر گرد شده

گوشه ی کادر بیشتر گرد شده

گوشه ی کادر بیشترین مقدار گرد شده

مثال شماره 1

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

امتحان کنید

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

اشاره به تمام کادرهای بالایی(top border) با یک دستور

در این مثال، می خواهیم با استفاده از یک ویژگی خلاصه شده، تمام ویژگی های کادر بالایی(top border) را با یک دستور تنظیم کنیم.

تنظیم استایل کادر پایینی(bottom border)

در این مثال، نشان می دهیم که چگونه کادر پایینی یک عنصر را تنظیم کنیم.

تنظیم ضخامت(width) کادر سمت چپ یک عنصر

در این مثال، ضخامت کادر سمت چپ یک عنصر تنظیم می شود.

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

در این مثال، نشان می دهیم که چگونه رنگ چهار سمت کادرهای یک عنصر را تنظیم کنیم. این کادرها می توانند از یک تا چهار رنگ داشته باشند.

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

در این مثال، شیوه ی رنگی کردن کادر سمت راست یک عنصر نشان داده می شود.

تمام ویژگی های border در CSS

توضیح	ویژگی
تمام ویژگی های border را در یک دستور تنظیم می کند.	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

تاریخ انتشار : 01 آبان 1403.
تاریخ بروزرسانی : 02 آبان 1403.
بازدید: 220

نوشتن دیدگاه

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