مقدمه
گوشه‌های گرد یا همان rounded corners در طراحی وب یکی از ویژگی‌های جذاب و بسیار استفاده‌شده برای ایجاد ظاهری نرم و دلپذیر هستند. این ویژگی به طراحان اجازه می‌دهد تا عناصر صفحه را با حاشیه‌های گردتر و دوستانه‌تر به نمایش بگذارند. در این مقاله، به بررسی چگونگی استفاده از این ویژگی در CSS خواهیم پرداخت و نکاتی را در مورد کاربردهای آن در پروژه‌های واقعی ارائه خواهیم داد.
استفاده از گوشه‌های گرد در CSS به سادگی با استفاده از خاصیت border-radius قابل پیاده‌سازی است. این خاصیت می‌تواند به صورت عددی یا با درصد بیان شود و به هر یک از گوشه‌های عناصر وب اعمال گردد. بیایید نگاهی به نحوه استفاده از آن بیندازیم.
چگونگی اعمال گوشه‌های گرد
برای اعمال گوشه‌های گرد، می‌توانید از مقادیر مختلفی برای خاصیت border-radius استفاده کنید. به عنوان مثال، مقادیر واحد (مانند px) یا درصد (%) به شما امکان می‌دهند تا میزان انحنای گوشه‌ها را تنظیم کنید.
در ادامه چند مثال از استفاده‌های رایج و کاربردی از این خاصیت را خواهیم دید که می‌تواند به ظاهر رابط کاربری وبسایت شما جلوه خاصی بدهد.
<!-- HTML Example -->
<div class="rounded-box">Hello World!</div>
<!-- CSS Example -->
<style>
.rounded-box {
width: 200px;
height: 100px;
background-color: lightblue;
border-radius: 15px;
padding: 20px;
text-align: center;
}
</style>توضیح کدها
<div class="rounded-box">Hello World!</div>این تگ HTML یک باکس با کلاس "rounded-box" ایجاد می‌کند که متن "Hello World!" را نمایش می‌دهد.
.rounded-boxیکی از کلاس‌های CSS تعریف شده است که برای باکس گوشه‌های گرد اعمال می‌شود.
width: 200px;عرض باکس را به 200 پیکسل تنظیم می‌کند.
height: 100px;ارتفاع باکس را به 100 پیکسل تنظیم می‌کند.
background-color: lightblue;رنگ پس‌زمینه باکس را آبی روشن می‌کند.
border-radius: 15px;باعث می‌شود گوشه‌های باکس به میزان 15 پیکسل گرد شوند.
padding: 20px;فاصله داخلی باکس را به 20 پیکسل تنظیم می‌کند.
text-align: center;متن داخل باکس را به‌صورت وسط‌چین نمایش می‌دهد.