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

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

ویژگی border-radius

ویژگی border-radius برای گرد کردن گوشه های یک عنصر به کار می رود.

نکته: این ویژگی به شما این امکان را می دهد که حاشیه گرد به عنصر اضافه کنید.

در زیر سه مثال آمده است:

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

گوشه های گرد

2. گوشه های گرد یک عنصر با اعمال حاشیه:

گوشه های گرد

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

گوشه های گرد

کدهای سه مثال فوق در زیر آمده است:

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}


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

ویژگی border-radius – تعریف هریک از گوشه ها

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

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

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

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

یک مقدار border-radius: 15px 50px; (مقدار به همه گوشه های عنصر اعمال می شود)

کدهای مقادیر فوق در زیر آمده است:

#rcorners1 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners4 {
    border-radius: 15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}


شما همچنین می توانید حاشیه های بیضی شکل نیز ایجاد نمایید. به مثال زیر توجه کنید:

#rcorners1 {
    border-radius: 50px / 15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 15px / 50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;
}


ویژگی های مرتبط با گوشه های گرد در CSS

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *