اینکار بسیار ساده میباشد فقط کافیست در دستور های CSS تان دستور border-radius را اضافه کرده و برای مرورگر های مختلف تنظیم کنید .
ما اینکار را برای سه مرورگر فایرفاکس ، اپرا و کروم که امروزه پر مخاطب ترین مرورگر ها هستند انجام میدهیم .
ابتدا کلاس مورد نظرمان را اسم گذاری میکنیم ما اسم کلاس را wikivb میگذاریم سپس با دو کروشه محل قرار گیری دستور ها را باز و بسته میکنیم .
سپس در بین کروشه ها روع به تایپ دستور ها میکنیم در دستور های زیر o برای مرورگر های اپرا میباشد ، webkit برای مرورگر های کروم بوده و moz برای فایرفاکس است .
توجه داشته باشید که در بالا کد ها ۵ پیکس داده شده اند و دستور میدهند که چهار گوشه به مقدار مساوی ۵ پیکسل گرد شوند اما ممکن است شما بخواهید ار گوشه به اندازه متفاوتی گرد شود بنابر این به صورت زیر تایپ میکنید :
در کد های بالا چهار مقدار دادیم که هر کدام برای هر گوشه دستوری صادر میکرد و از چپ به راست به ترتیب متعلق به گوشه های بالا سمت چپ ، بالا سمت راست ، پایین سمت راست و پایین سمت چپ بودند .
به همین راحتی میتوانید با استفاده از CSS گوشه تصاویر را گرد کنید و به سلیقه خود اشکال زیبایی خلق نمایید .
امیدواریم از این آموزش استفاده لازم را برده باشید .
منبع: کاربر science51 در همین سایت
border-radius
با تشکر
3 نکته:
1) سی اس اس 3 زبان برنامه نویسی محسوب نمیشه!
2) از border-radius میشه برای هر element غیر از تصویر هم استفاده کرد
3) prefix مربوط به IE10 هم -ms-border-radius است
البته زبان برنامه نویسی CSS3 درست هست چون عدد 3 ورژن اون زبان هست که گفته شده. مانند نحوه نوشتن و گفتن یک نرم افزار به همراه ورژن اون.
جواب سوال دوم بله هست. البته مشکل این قسمت این هست که اگر گرد بودن زیاد باشه متن از عنصر خارج میشه.
prefix های بیشتری هم مثل khtml و o و ... وجود داره.