آموزش ایجاد گوشه های گرد در css

css امکان استفاده از borderها را برای عناصر می‌دهد که با استفاده از این خاصیت دور عناصر یک کادر با ضخامت و رنگ و نوع مشخص کشیده شود. اما اکثرا طراحان وب‌ سایت گوشه های تیز را نمی‌پسندند و تمایل دارند در کارهایشان از گوشه های گرد استفاده کنند. در گذشته برای این کار از نرم‌افزار فتوشاپ استفاده می شد و طراحان گوشه‌های گرد را در فتوشاپ طراحی کرده و معمولا بصورت یک تصویر وارد سایت می‌کردند که این کار تاثیر منفی در سرعت بارگذاری سایت داشت. ولی با ویژگی border-radius در CSS می توان به عناصر HTML گوشه‌های گرد داد.

1- گوشه‌های گرد

در ساده ترین حالت، ویژگی border-radius با یک مقدار واحد، شعاع یکسان را برای هر گوشه عنصر ترسیم می کند:

border-radius: 15px;

مرورگر از مقدار شعاع ارائه شده برای ترسیم دایره ای در هر گوشه از عنصر استفاده می کند. این مقدار برابر است با فاصله مرکز دایره تا لبه شعاع آن.

با این وجود، شما به هر یک از گوشه ها محدود نمی شوید. با ارائه چهار مقدار می توانید مقادیر جداگانه ای را برای هر گوشه تهیه کنید:

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

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

border-radius: 15px 50px;

و یا حتی سه مقدار (اولین مقدار به گوشه ی بالا سمت چپ، دومین مقدار به گوشه های بالا سمت راست و پایین سمت راست و مقدار سوم به گوشه ی پایین سمت چپ بکار گرفته می شود):

border-radius: 15px 50px 30px;

می توانید راه طولانی تر را انتخاب کنید و شعاع هر گوشه را جداگانه با دستور جدایی تنظیم کنید .

border-top-left-radius: 1em;
border-top-right-radius: 2em;
border-bottom-right-radius: 1.5em;
border-bottom-left-radius: .75em;

2- گوشه های بیضوی

علاوه بر گوشه های کاملاً گرد (یعنی دایره ای) که تاکنون دیده اید، می توانید یک گوشه بیضوی را نیز اعمال کنید. یک مسیر بیضوی به دو مقدار شعاع احتیاج دارد: اولین آن شعاع از مرکز مسیر به یکی از لبه های چپ یا راست است، در حالی که عدد دوم فاصله از مرکز مسیر تا یکی از لبه های بالا یا پایین است.

border-radius: 40px/20px ;

مقدار 40px شعاع افقی و مقدار 20px شعاع عمودی است. اسلش (/) بین آنها به مرورگر این امکان را می دهد که شما یک مسیر بیضوی را ایجاد کنید. با ارائه چهار مقدار برای هر شعاع بیضوی می توانید هر چهار گوشه دارای شکل های مستطیل متفاوت باشند. به این گونه که ابتدا چهار مقدار را برای شعاع افقی هر گوشه (شروع در گوشه بالا سمت چپ) ارائه می دهید؛ سپس یک اسلش (/) و به دنبال آن چهار مقدار برای شعاع عمودی هر گوشه:

border-radius: 40px 10px 20px 10px / 20px 30px 40px 20px;

در ترکیب گوشه های بیضوی و دایره ای باید از همین روش استفاده کنید. گوشه های مدور شعاع افقی و عمودی یکسانی دارند:

border-radius: 10px 10px 20px 10px / 10px 30px 40px 10px;

3- واحدها

px و em متداول ترین اندازه گیری ها هستند که شما استفاده خواهید کرد، اما می توانید از درصد نیز استفاده کنید (اگرچه آنها کمی متفاوت از آنچه انتظار دارید رفتار می کند).

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 50% 20% / 10% 40%;