سبد (0)

خصوصیت border-radius

مثال (خصوصیت border-radius)

گرد کردن گوشه های عنصر <div>:

div
{
border:2px solid;
border-radius:25px;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت border-radius را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، این خصوصیت را پشتیبانی نمی کند.


تعریف و کاربرد

با استفاده از خصوصیت مختصر border-radius، می توانید چهار خصوصیت زیر را در یک مرحله تنظیم نمایید:

  1. border-top-left-radius
  2. border-top-right-radius
  3. border-bottom-right-radius
  4. border-bottom-left-radius

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

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderRadius="5px"

نحوه استفاده

border-radius: 1-4 length|% / 1-4 length|%;

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

مقادیر اول شعاع افقی گوشه ها را مشخص می کنند که بترتیب برابر است با:

  1. بالا - چپ
  2. بالا - راست
  3. پایین - راست
  4. پایین چپ

مقادیر دوم شعاع عمودی است و ترتیب آنها مانند بالاست. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار توضیحات نمایش دادن
length شکل گوشه ها را تعیین می کند. نمایش دادن »
% شکل گوشه ها را به درصد تعیین می کند. نمایش دادن »

مثال 1

border-radius:2em;

برابر است با:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

مثال 2

border-radius: 2em 1em 4em / 0.5em 3em;

برابر است با:

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

بیاموزهای مرتبط

CSS3 Border (بیاموز CSS3)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه