آموزش گرد کردن گوشه های کادر برای مرورگها

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

کدی که به زودی تمام کرورگر ها فقط از آن برای گرد کرن گوشه های کادر پشتیبانی میکنند:

[css]border-radius: 2px;[/css]

این کد در فایرفاکس از نسخه 13 به بعد فقط پشتیبانی میشود. یعنی کد سابق:

[css]-moz-border-radius: 2px;[/css]

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

برای گرد کردن گوشه کادر ها در مرورگر هایی مثل کروم هم باید از این کد استفاده کنید:

[css]-webkit-border-radius: 2px;[/css]

برای گرد کردن گوشه های کادر در اندازه های مختلف میتوانید از کد:

[css]border-radius: 1px 2px 3px 4px;[/css]

به ترتیب از چب به راست: بالا، راست، پایین و چپ

پیشنهاد: من به شما پیشنهاد میکنم که از هر 3 کد برای گرد کردن استفاده کنید. چون اکثر کاربران ایرانی علاقه ای به آپدیت کردن مرورگر خود ندارند. و هر یک از کد ها فقط بر روی مرورگر مخصوص خود تاثیر میگذارد و تاثیری بر روی مرورگر دیگر ندارد و با اضافه شدن قابلیت پشتیبانی از کد اول کد های دیگر هیچ تاثیری بر مرورگر ندارند.

نکته: به جای اعداد وارد شده برای عبارت px عدد دلخواه خود را وارد کنید.