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 پشتیبانی می کنند.
سلام
این را توضیح میدید لطفا؟
50px 10% 35px
سلام. بطور کلی border برای چهار گوشه بصورت جداگانه اعمال میشه. اما وقتی کمتر از چهار مقدار داده میشه، مقدارهای داده شده رو برای بقیه گوشه ها در نظر گرفته میشه. مثلا اگر فقط از یک مقدار (مثلا 20px) استفاده کنید این مقدار رو برای چهار گوشه در نظر می گیره. اگر از ۲ مقدار استفاده بشه (مثلا 20px 60px) مقدار اول برای گوشه بالا سمت چپ و گوشه پایین سمت راست و مقدار دوم برای گوشه بالا سمت راست و گوشه پایین سمت چپ در نظر گرفته میشه. حالا اگر از ۳ مقدار داده بشه، مقدار اول برای گوشه بالا سمت چپ، مقدار دوم برای گوشه بالا سمت راست و گوشه پایین سمت چپ، و مقدار سوم برای گوشه پایین سمت راست در نظر گرفته میشه. واحد ها هم بصورت پیکسل و درصد استفاده میشند. در درصد، درصدی از اندازه عرض و طول عنصر در نظر گرفته میشه و متغییر هست اما در پیکسل مقدار ثابت هست.