اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی border-radius در CSS

ویژگی border-radius در CSS

border-radius Property

عناصر مرتبط:
border

ویژگی 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 پشتیبانی می کنند.

پست قبلی

ویژگی border-image-width در CSS

پست بعدی

ویژگی border-spacing در CSS

پست بعدی
css-border-spacing-property

ویژگی border-spacing در CSS

دیدگاه ها 2

  1. raha می‌گوید:
    8 ماه قبل

    سلام
    این را توضیح میدید لطفا؟
    50px 10% 35px

    پاسخ
    • سهیل اصلی فرد می‌گوید:
      8 ماه قبل

      سلام. بطور کلی border برای چهار گوشه بصورت جداگانه اعمال میشه. اما وقتی کمتر از چهار مقدار داده میشه، مقدارهای داده شده رو برای بقیه گوشه ها در نظر گرفته میشه. مثلا اگر فقط از یک مقدار (مثلا 20px) استفاده کنید این مقدار رو برای چهار گوشه در نظر می گیره. اگر از ۲ مقدار استفاده بشه (مثلا 20px 60px) مقدار اول برای گوشه بالا سمت چپ و گوشه پایین سمت راست و مقدار دوم برای گوشه بالا سمت راست و گوشه پایین سمت چپ در نظر گرفته میشه. حالا اگر از ۳ مقدار داده بشه، مقدار اول برای گوشه بالا سمت چپ، مقدار دوم برای گوشه بالا سمت راست و گوشه پایین سمت چپ، و مقدار سوم برای گوشه پایین سمت راست در نظر گرفته میشه. واحد ها هم بصورت پیکسل و درصد استفاده میشند. در درصد، درصدی از اندازه عرض و طول عنصر در نظر گرفته میشه و متغییر هست اما در پیکسل مقدار ثابت هست.

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن