حاشیه های گرد (Rounded Borders)
حاشیه گرد یعنی گوشه های قاب عنصر خم می شوند. ویژگی «شعاع حاشیه (border-radius)» این کار را انجام می دهد. هرچه شعاع بیشتر باشد، گوشه ها گردتر می شوند. مثل گوشه کارت مدرسه.
کاربرد حاشیه های گرد (Rounded Borders)
برای دکمه ها و کارت ها خیلی کاربردی است. زیرا ظاهر را دوستانه تر می کند. همچنین با «حاشیه (Border)» ترکیب می شود.
نمونه: گردکردن گوشه ها با border-radius
<style>
p.demo {
border: 2px solid red;
border-radius: 5px;
}
</style>
<p class="demo">Normal text with rounded border</p>
نکته: مقدار «border-radius» می تواند پیکسل یا درصد باشد. درصد نسبت به ابعاد عنصر محاسبه می شود.
گام های عملی
- ابتدا یک حاشیه با «border» بساز.
- سپس «border-radius» را به عنصر اضافه کن.
- در صورت نیاز، مقدار را کم و زیاد کن.
مطالب مرتبط: حاشیه ها، عرض حاشیه، رنگ حاشیه، و طرف های حاشیه. برای سئو نیز از عبارت حاشیه های گرد استفاده کن.
جمع بندی سریع
- border-radius گوشه ها را گرد می کند.
- مقدار بیشتر، گردی بیشتر می دهد.
- با border بهتر نتیجه می گیری.
- می توانی از px یا % استفاده کنی.