گرد کردن گوشه‌ها به کمک CSS

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

در CSS سه دسته کد وجود دارد که برای گرد کردن گوشه‌های المانها میتوانیم از آنها استفاده کنیم.

دسته اول کد‌های مربوط به استاندارد CSS 3 میباشند که در حال حاضر در هیچ مرورگری بطور کامل پشتیبانی نمیشود، بنابراین فقط به معرفی این کد‌ها بسنده میکنم.
این کد‌ها بصورت زیر هستند :

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

این کد‌ها به ترتیب، کل گوشه‌ها، گوشه‌ بالا راست، گوشه بالا چپ، پایین راست و پایین چپ را گرد میکنند.

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

-moz-border-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-bottomright: 5px;

-moz-border-radius-bottomleft: 5px;

دسته سوم کدهایی هستند که در مرورگر سافاری و مرورگر جدید گوگل کروم کار میکنند.
این کد‌ها هم بصورت زیر هستند :

-webkit-border-radius: 5px;

-webkit-border-top-right-radius: 5px;

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;