یکی از دغدغه های اصلی طراحان وب نمایش صحیح سایت در تمامی مرورگرها می باشد که اصطلاحا میگن سایت باید حالت Cross Browser داشته باشه.
سایتهای زیادی هم برای تست نمایش سایت در مرورگرهای مختلف وجود داره که بعد از طراحی میتونید از اون ها استفاده کنید.

امروز روشی رو یاد میگیرم که باکس هایی که با گوشه های گرد طراحی میکنیم در تمامی مرورگرها حتی اینترنت اکسپلورر هم گرد دیده شود.

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

حالت کلی به صورت زیر می باشد:

border-radius  ==> تمام گوشه هاي جدول
border-top-right-radius  ==> گوشه بالا راست
border-top-left-radius  ==> گوشه بالا چپ
border-bottom-right-radius  ==> گوشه پايين راست
border-bottom-left-radius ==> گوشه پایین چپ

در css3 مرورگرها کدهای خاص خودشون رو دارند 

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

-moz-border-radius

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

-webkit-border-radius

مرورگر اپرا هم به نیاز به این پیشوند ها ندارد و border-radius را شناسایی میکند.
البته توجه داشته باشید این پیشوند ها رو هم نذارید تمامی مرورگرها اونهارو شناسایی میکنند به جر IE ورژن 9 به پایین.

مثلا برای گرد کردن تمامی گوشه های باکس به صورت زیر عمل میکنیم.

border-radius: 5px;

با استفاده از این کد تمامی گوشه ها به اندازه 5 پیکسل گرد می شوند.

خوب حالا بریم سراغ روشی که مرورگر IE هم اونو ساپورت کنه.

برای استفاده از این روش شما میتونید از کد jquery corner استفاده کنید و از لینک زیر قابل دریافت می باشد.

http://www.malsup.com/jquery/corner

روش استفاده از کد هم در خود سایت به صورت تصویری و به طور کامل توضیح داده شده است.

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

به جز روشی که توضیح داده شد با استفاده از margin هم میتونید گوشه های گرد ایجاد کنید که در تمامی مرورگرها درست دیده بشه اما نیاز به کدها و کم و زیاد کردن اندازه margin می باشد که خیلی جالب نیست.
همچنین میتوانید از عکس هم برای گرد کردن گوشه ها استفاده کنید.
بهترین روش برای گرد کردن استفاده از jquery corner می باشد که در سریعترین زمان ممکن با کمترین خط کد میتوانید گوشه هایی گرد یا غیر گرد با حالتهای مختلف داشته باشید.

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




منبع : www.p30data.com