گرد کردن گوشه ها در CSS

یکی از ویژگی های بسیار خوب CSS استفاده از خاصیت radius برای ایجاد گوشه‌های گرد در عناصر است. دیگر برای ایجاد یک تصویر گرد نیاز نیست شما آن عکس را در نرم افزارهایی مثل فتوشاپ گرد کنید. 

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

مشاوره رایگان و هدفمند طراحی سایت خود را به ما بسپارید

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

    CSS امکان استفاده از border ها را برای عناصر می‌دهد که با استفاده از این خاصیت دور عناصر یک کادر با ضخامت و رنگ و نوع مشخص کشیده می شود. اما اکثرا طراحان وب‌سایت گوشه های تیز را نمی‌پسندند و تمایل دارند در کارهایشان از گوشه های گرد استفاده کنند. قبل‌تر‌ها برای این کار از نرم‌افزار فتوشاپ استفاده می شود و طراحان گوشه‌های گرد را در فتوشاپ طراحی کرده و معمولا بصورت یک تصویر وارد سایت می‌کردند که همان‌طور که در آموزش‌های قبلی اشاره شده است این کار تاثیر منفی در سرعت بارگزاری سایت دارد.

    ولی با ویژگی خوبی که در CSS است می توانید به عناصر HTML گوشه‌های گرد دهید.

    شما به عنوان یک طراح وب‌سایت می‌توانید با استفاده از border-radius گوشه‌های گرد در CSS ایجاد کنید.

    مانند اکثر ویژگی‌های CSS می توانید این دستور را برای هر چهار گوشه با یک عدد کنترل کنید و یا برای هر گوشه مقداری جداگانه بنویسید:

    .rounded {
         -moz-border-radius: 10px;
         -webkit-border-radius:10px;
         border-radius:10px;
    }

     

    مثال کد بالا را می بینید

    با این حال شما می توانید هر گوشه‌ای را که دوست دارید برگزیده و به آن border-radius دهید.

    .rounded_corners{
         border-top-right-radius: 25px;
         border-top-left-radius: 25px;
         border-bottom-left-radius: 25px;
         border-bottom-right-radius: 25px;
    }

    مثال کد بالا را می بینید

    شما هم‌چنین با اختصاص دو مقدار به radius می‌توانید کارهای بیشتری انجام داده و کنترل بیشتری روی گرد شدن گوشه‌ها داشته باشید.

    در کد زیر مقدار اول برای گرد شدن در حالت افقی و مقدار دوم برای گرد شدن در حالت عمودی است:

    .rounded_corner{
         border-top-right-radius: 20px 5px;
         border-top-left-radius: 20px 5px;
         border-bottom-left-radius: 5px 20px;
         border-bottom-right-radius: 5px 20px;
    }

    مثال کد بالا را می بینید

    نوشتن یک نظر
    نظرتان را با ما در میان بگذارید

    شما در پاسخ به

    نظر شما اضافه شد، اما ابتدا باید تایید شود.

    لطفا نام خود را وارد کنید
    لطفا آدرس ایمیل خود را وارد کنید لطفا آدرس ایمیل معتبر وارد کنید
    لطفا یک نظری بنویسید
    شما باید این قوانین را بخوانید و بپذیرید.
    افزودن نظر