شعاع مرزی CSS

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

div {
    border: 3px solid;
    border-radius: 30px;
}

این در واقع خلاصه ای برای چهار زیر خاصیت شعاع مرزی CSS است:

• شعاع مرز-بالا-چپ
• مرز-بالا-راست-شعاع
• مرز پایین شعاع چپ
• مرز پایین شعاع راست

از هر یک از این زیرمجموعه ها می توان برای هر گوشه به صورت جداگانه استفاده کرد:

div {
    border: 4px solid green;
    border-top-left-radius: 4em;  	
}

div {
    border: 4px solid green;
    border-top-right-radius: 4em;
}

اگر گوشه های گرد شده را برای عنصری اضافه کنید که دارای رنگ زمینه یا تصویر پس زمینه باشد ، با حاشیه نیز گرد می شود و از خطوط آن نشت نمی کند:

#roundcorners {
    border-radius: 30px;
    background: url(sheet.gif);
    background-position: center top;
    background-repeat: repeat;
    padding: 25px; 
    width: 250px;
    height: 200px; 
}

بررسی شعاع مرزی CSS

نحو شعاع حاشیه ساده است:

مرز شعاع: مقدار 1 مقدار 2 مقدار 3 مقدار 4؛

مقادیر را می توان در واحد طول یا درصد تعریف کرد. می توانید یکی ، دو ، سه یا چهار مورد از آن ها را مشخص کنید:

گوشه های بیضی با شعاع مرز

در برخی موارد ، ممکن است نیازی به گوشه های کاملا گرد نداشته باشید. برای ایجاد گرد بیضوی ، دو مقدار برای ویژگی CSS-border radius تعریف کنید و یک شکاف (/) بین آن ها قرار دهید. مقدار اول شعاع افقی گوشه را مشخص می کند و مقدار دوم شعاع عمودی را تعریف می کند:

#example1 {
    border: 5px solid green;
    padding: 10px;
    border-radius: 3em;
}

#example2 {
    border: 5px solid red;
    padding: 10px;
    border-radius: 3em/6em;
}

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.