ویژگی border-radius در CSS

ویژگی border-radius در CSS برای گرد کردن گوشه‌های لبه‌های حاشیه بیرونی یک عنصر یا تگ HTML استفاده می‌شود. این ویژگی به شما امکان می دهد گوشه های عناصر را کاملا گرد نمایید. این ویژگی برای عناصری قابل استفاده است که می توان به آنها border اضافه کرد مانند div و… .

این ویژگی را فقط در مرورگرهایی می توان استفاده کرد که از WebKit به عنوان موتور وب خود استفاده نمی کنند. امروزه تقریبا تمامی مرورگرها از این ویژگی پشتیبانی می کنند اما برای استفاده در مرورگرهای قدیمی می توان از -moz-border-radius یا -webkit-border-radius استفاده نمود.

ویژگی border-radius در CSS می تواند شامل یک، دو، سه یا چهار مقدار باشد. این ویژگی می تواند هر واحد مقدار CSS معتبری (px, rem, em, ch, vh, vw و…) را بپذیرد. حتی این مقادیر می تواند بصورت درصدی نیز باشد. می‌تواند به صورت اختیاری با یک اسلش (/) مجموعه دومی از مقادیر را وارد نمود. اسلش ها فقط در Gecko 2.0 (Firefox 4.0) پشتیبانی می شوند.

border-radius: 15px;

border-radius: 15px 30px;

border-radius: 15px 30px 5px;

border-radius: 15px 30px 5px 0;

border-radius: 15%;

border-radius: 30px/20px;

border-radius: 100%;

اندازه (مقدار)

اندازه شعاع دایره یا محورهای نیمه اصلی و نیمه کوچک بیضی را با استفاده از مقادیر طول نشان می دهد. مقادیر منفی نامعتبر هستند.

درصد

اندازه شعاع دایره یا محورهای نیمه اصلی و نیمه کوچک بیضی را با استفاده از مقادیر درصد نشان می دهد. درصد برای محور افقی به عرض جعبه اشاره دارد. درصد برای محور عمودی به ارتفاع جعبه اشاره دارد. مقادیر منفی نامعتبر است.

مقادیر border-radius در CSS

چهار مقدار برای هر شعاع به ترتیب بالا-چپ، بالا-راست، پایین-راست، پایین-چپ داده شده است. اگر از پایین-چپ حذف شود، مقدارش همان بالا-راست می شود. اگر پایین-راست حذف شود، مقدارش همان بالا-چپ مس شود. اگر سمت راست-بالا حذف شود مقدارش همان بالا چپ می شود.

۱. مقدار border-radius: 15px

تمامی مقادیر بالا-چپ، بالا-راست، پایین-راست و پایین چپ مقدار ۱۵px می باشد.

۲. مقدار border-radius: 15px 30px

مقادیر بالا-چپ و پایین-راست مقدار ۱۵px و بالا-راست و پایین چپ مقدار ۳۰px می باشد.

۳. مقدار border-radius: 15px 30px 5px

مقدار بالا-چپ ۱۵px، بالا-راست و پایین-چپ ۳۰px و پایین-راست مقدار ۵px می باشد.

۴. مقدار border-radius: 15px 30px 5px 0

مقدار بالا-چپ ۱۵px، بالا-راست ۳۰px، پایین-راست ۵px و پایین-چپ مقدار ۰ می باشد. ترتیب این مقادیر ساعتگرد می باشد.

Shorthand border-radius در CSS

ویژگی border-radius در CSS قابلیت shorthand را دارد. بدین معنا که می توانیم انحای هر گوشه از عنصر را به صورت مجزا تعریف کنیم.

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

این قابلیت به ما این امکان را می دهد تا در صورت نیاز اندازه انحنای هر گوشه از عنی یا تگ را تغییر دهیم.

border-top-left-radius: 30px;

پشتیبانی مرورگرها از border-radius در CSS

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

اعداد به دنبال -webkit- یا -moz- اولین نسخه ای را که با پیشوند کار می کرد را مشخص می کند.

با اینکه امروزه دیگر غیرضروری است، اما برای بهترین پشتیبانی ممکن از مرورگر، می‌توانید این ویژگی را با -webkit- و -moz- پیشوند کنید تا مطمئن شوید مرورگرهای قدیمی می‌توانند از آن پشتیبانی کنند:

-webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 4px;

  border-top-left-radius: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 4px;