آموزش Border Radius در CSS3

یکی از ویژگی‌های برجسته‌ی CSS 3، خاصیت border-radius است که به طراحان وب اجازه می‌دهد به راحتی گوشه‌های عناصر خود را گرد کرده و جلوه‌ای زیبا به آن‌ها بدهند. این ویژگی به طرز چشم‌گیری استفاده از تصاویر یا کدهای جاوااسکریپت برای ایجاد گوشه‌های گرد را حذف کرده است و به سادگی با تعریف یک خاصیت CSS، گوشه‌های المان‌ها را سفارشی‌سازی می‌کند.

خاصیت border-radius

با استفاده از خاصیت border-radius در CSS 3، می‌توانید به هر المان دلخواه خود خصوصیت گوشه‌های گرد اضافه کنید. این ویژگی برای طراحی‌های مدرن بسیار کاربردی است و می‌تواند به ظاهر حرفه‌ای‌تر و زیباتر المان‌های شما کمک کند. در زیر سه مثال از کاربرد این ویژگی آورده شده است:

1. عنصری با گوشه های گرد که رنگ پس زمینه ی مشخصی دارد:

2. المانی با گوشه های گرد که خط حاشیه (border) دارد:

3. عنصری با گوشه های گرد که دارای یک تصویر پس زمینه است:

                
        #rcorners1 { 
        border-radius: 25px; 
        background: #8AC007; 
        padding: 20px; 
        width: 200px; 
        height: 150px; 
        }

        #rcorners2 { 
            border-radius: 25px; 
            border: 2px solid #8AC007; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        }
        
        #rcorners3 { 
            border-radius: 25px; 
            background: url(paper.gif); 
            background-position: left top; 
            background-repeat: repeat; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        }
    

استفاده از خاصیت border-radius برای مقداردهی جداگانه به هر گوشه ی عنصر

چنانچه طراح وب تنها یک مقدار به خاصیت border-radius تخصیص دهد, در آن صورت همان مقدار تخصیص یافته به هر چهار گوشه ی عنصر مربوطه اعمال می شود.
با این وجود, شما می توانید برای هر گوشه مقداری متمایز درنظر بگیرید. برای این منظور باید از قوانین ذیل پیروی کنید:

• Four values: اولین مقدار به گوشه ی بالا سمت چپ اعمال می شود. مقدار دوم به گوشه ی بالا سمت راست اعمال می گردد. سومین مقدار به گوشه ی پایین سمت راست و چهارمین مقدار به گوشه ی پایین سمت چپ اعمال می شود.
• Three values: اولین مقدار به گوشه ی بالا سمت چپ, دومین مقدار به گوشه ی بالا سمت راست و همچنین گوشه ی پایین سمت چپ, سومین مقدار نیز به گوشه ی پایین سمت راست اعمال می گردد.
• Two values: اولین مقدار به گوشه های بالا سمت چپ و گوشه ی پایین سمت راست اعمال می شود. دومین مقدار نیز به گوشه ی بالا سمت راست و گوشه ی پایین سمت چپ اعمال می گردد.
• One value: هر چهار گوشه به طور یکسان گرد شده و مقداردهی می شوند

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

   
        Four values - border-radius: 15px 50px 30px 5px:
        Three values - border-radius: 15px 50px 30px:
        Two values - border-radius: 15px 50px:
    

کد CSS 3 آن در مثال زیر به نمایش گذاشته شده است:

                
        #rcorners4 { 
            border-radius: 15px 50px 30px 5px; 
            background: #8AC007; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        } 

        #rcorners5 { 
            border-radius: 15px 50px 30px; 
            background: #8AC007; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        } 

        #rcorners6 { 
            border-radius: 15px 50px; 
            background: #8AC007; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        }
    

همچنین می توان گوشه های بیضی شکل برای عنصر ایجاد کرد:

  
        #rcorners7 { 
            border-radius: 50px/15px; 
            background: #8AC007; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        } 

        #rcorners8 { 
            border-radius: 15px/50px; 
            background: #8AC007; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        } 

        #rcorners9 { 
            border-radius: 50%; 
            background: #8AC007; 
            padding: 20px; 
            width: 200px; 
            height: 150px; 
        }
    

خاصیت های مربوط به گرد سازی گوشه ی عناصر در CSS: