گوشه‌های گرد

Main Page Tutorial
موارد آموزشی
CSS پیشرفته
۱	گوشه‌های گرد
۲	کادر تصاویر
۳	پس‌زمینه‌ها
۴	رنگ‌ها
۵	Gradientها
۶	سایه‌ها
۷	افکت‌های متن
۸	قلم‌های وب
۹	2D Transforms
۱۰	3D Transforms
۱۱	Transitions
۱۲	انیمیشن‌ها
۱۳	Tooltip
۱۴	استایل‌دهی تصاویر
۱۵	ویژگی object-fit
۱۶	دکمه‌ها
۱۷	مثال‌های صفحه‌بندی (Pagination)
۱۸	ستون‌های متعدد
۱۹	رابط کاربری
۲۰	متغیرها
۲۱	Box Sizing
۲۲	Flexbox
۲۳	Media Queries
۲۴	مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

با ویژگی border-radius در CSS، می‌توانید به هر عنصری «گوشه‌های گرد» بدهید.

ویژگی border-radius در CSS

ویژگی border-radius در CSS میزان گرد شدن گوشه‌های یک عنصر را تعریف می‌کند.

نکته: این ویژگی به شما اجازه می‌دهد که به عناصر گوشه‌های گرد اضافه کنید!

در اینجا سه مثال وجود دارد:

1. گوشه‌های گرد برای یک عنصر با رنگ پس زمینه مشخص:
2. گوشه‌های گرد برای یک عنصر دارای کادر:
3. گوشه‌های گرد برای عنصری با تصویر پس زمینه:

در اینجا کد وجود دارد:

مثال

 1 #rcorners1 {
 2   border-radius: 25px;
 3   background: #73AD21;
 4   padding: 20px;
 5   width: 200px;
 6   height: 150px;
 7 }
 8 
 9 #rcorners2 {
10   border-radius: 25px;
11   border: 2px solid #73AD21;
12   padding: 20px;
13   width: 200px;
14   height: 150px;
15 }
16 
17 #rcorners3 {
18   border-radius: 25px;
19   background: url(paper.gif);
20   background-position: left top;
21   background-repeat: repeat;
22   padding: 20px;
23   width: 200px;
24   height: 150px;
25 }

مشاهدهٔ نتیجه

نکته: ویژگی border-radius در حقیقت یک ویژگی مختصر برای ویژگی هایborder-top-left-radius، border-top-right-radius، border-bottom-right-radius و border-bottom-left-radius است.

ویژگی border-radius در CSS - مشخص کردن هر گوشه

ویژگی border-radius می‌تواند از یک تا چهار مقدار داشته باشد. قوانین به صورت زیر است:

• چهار مقدار - border-radius: 15px 50px 30px 5px; (اولین مقدار به گوشه بالا-چپ اعمال می‌شود، دومین مقدار به گوشه بالا-راست، سومین مقدار به گوشه پایین-راست، و چهارمین مقدار به گوشه پایین-چپ اعمال می‌شود):

• سه مقدار - border-radius: 15px 50px 30px; (اولین مقدار به گوشه بالا-چپ اعمال می‌شود، دومین مقدار به گوشه بالا-راست، و سومین مقدار به گوشه پایین-راست اعمال می‌شود):

• دو مقدار - border-radius: 15px 50px; (اولین مقدار به گوشه بالا-چپ و گوشه پایین-راست، و دومین مقدار به گوشه بالا-راست و گوشه پایین-چپ اعمال می‌شود):

• یک مقدار - border-radius: 15px; (مقدار این ویژگی به تمامی چهار گوشه اعمال می گردد، که موجب می‌شود چهار گوشه به میزان برابر گرد شوند):

در اینجا کد مربوطه قرار دارد:

مثال

 1 #rcorners1 {
 2   border-radius: 15px 50px 30px 5px;
 3   background: #73AD21;
 4   padding: 20px;
 5   width: 200px;
 6   height: 150px;
 7 }
 8 
 9 #rcorners2 {
10   border-radius: 15px 50px 30px;
11   background: #73AD21;
12   padding: 20px;
13   width: 200px;
14   height: 150px;
15 }
16 
17 #rcorners3 {
18   border-radius: 15px 50px;
19   background: #73AD21;
20   padding: 20px;
21   width: 200px;
22   height: 150px;
23 }
24 
25 #rcorners4 {
26   border-radius: 15px;
27   background: #73AD21;
28   padding: 20px;
29   width: 200px;
30   height: 150px;
31 }

مشاهدهٔ نتیجه

همچنین شما می‌توانید گوشه‌های بیضی شکل نیز ایجاد کنید:

مثال

 1 #rcorners1 {
 2   border-radius: 50px / 15px;
 3   background: #73AD21;
 4   padding: 20px;
 5   width: 200px;
 6   height: 150px;
 7 }
 8 
 9 #rcorners2 {
10   border-radius: 15px / 50px;
11   background: #73AD21;
12   padding: 20px;
13   width: 200px;
14   height: 150px;
15 }
16 
17 #rcorners3 {
18   border-radius: 50%;
19   background: #73AD21;
20   padding: 20px;
21   width: 200px;
22   height: 150px;
23 }

مشاهدهٔ نتیجه

ویژگی های گوشه های گرد در CSS

ویژگی	توضیحات
border-radius	یک ویژگی مختصر برای تنظیم تمامی ویژگی border-*-*-radius
border-top-left-radius	شکل کادر در گوشه بالا سمت چپ را تعریف می‌کند
border-top-right-radius	شکل کادر در گوشه بالا سمت راست را تعریف می‌کند
border-bottom-right-radius	شکل کادر در گوشه پایین سمت راست را تعریف می‌کند
border-bottom-left-radius	شکل کادر در گوشه پایین سمت چپ را تعریف می‌کند

صفحهٔ بعد»

«صفحهٔ قبل