ویژگی border-radius در CSS

border-radius Property

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

نحوه نوشتار

/* به هر چهار گوشه اعمال خواهد شد */
border-radius: 50px;

/* بالا راست و پایین چپ | بالا چپ و پایین راست */
border-radius: 20px 60px;

/* پایین راست | بالا راست و پایین چپ | بالا چپ */
border-radius: 15px 35px 55px;

/* پایین چپ | پایین راست | بالا راست | بالا چپ */
border-radius: 15px 35px 55px 75px;

ویژگی border-radius یکی از چهار نوع مقدار زیر را می پذیرد:

اگر یک مقدار مشخص شود، این مقدار برای هر چهار گوشه اعمال می شود.
اگر دو مقدار مشخص شود، اولی برای گوشه های بالا چپ و پایین راست و دومی برای گوشه های بالا راست و پایین چپ اعمال می شوند.
اگر سه مقدار مشخص شود، اولی برای گوشه بالا چپ، دومی برای گوشه های بالا راست و پایین چپ و سومی برای گوشه پایین راست اعمال می شوند.
اگر چهار مقدار مشخص شود، به ترتیب برای گوشه های بالا چپ، بالا راست، پایین راست و پایین چپ اعمال خواهد شد.

علاوه بر این نوع خمیدگی، که بیشترین نوع استفاده از آن است، نوع دیگری از خمیدگی وجود دارد که میتوان با آن زاویه و شیب خمیدگی را نیز تعیین کرد. نحوه نوشتار آن به شکل زیر میباشد:

/* خمیدگی عمودی / خمیدگی افقی */ 
border-radius: 15px / 40px;

/* خمیدگی عمودی / خمیدگی افقی */ 
border-radius: 40px / 15px;

نکته: ویژگی border-radius به پس زمینه عنصر نیز اعمال می شود. اگر عنصری حاشیه (border) نداشته باشد خمیدگیهای اعمال شده توسط این ویژگی به پس زمینه آن اعمال می شود.

این ویژگی مقادیر چهار ویژگی زیر مجموعه خود را مشخص می کند:

border-radius-top-left: میزان خمیدگی گوشه بالا سمت چپ را مشخص می کند.

border-radius-top-left: 30px;

border-radius-top-right: میزان خمیدگی گوشه بالا سمت راست را مشخص می کند.

border-radius-top-right: 30px;

border-radius-bottom-right: میزان خمیدگی گوشه پایین سمت راست را مشخص می کند.

border-radius-bottom-right: 30px;

border-radius-bottom-left: میزان خمیدگی گوشه پایین سمت چپ را مشخص می کند.

border-radius-bottom-left: 30px;

در مثال زیر نحوه عمکرد این ویژگی را می بینیم:

html

<div class="box1">border-radius: 15px 40px;</div>
<div class="box2">border-radius: 10px 50px 50px 10px;</div>
<div class="box3">border-radius: 20px / 40px</div>

css

div {
    text-align: center;
    padding: 40px;
    border: 4px solid tomato;
    margin-bottom: 10px;
}
.box1 {
    border-radius: 10px 50px;
}
.box2 {
    border-radius: 10px 50px 50px 10px;
    background-color: cornflowerblue;
    color: #ffffff;
    border: none;
}
.box3 {
    border-radius: 20px / 40px;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.