מה זה border-radius?

המאפיין border-radius ב-CSS קובע את רדיוס העיגול של פינות הגבול של אלמנט. ניתן להשתמש בערכים ב-pixels, ems או אחוזים, ולתת לכל פינה רדיוס שונה אם רוצים.

שימוש במאפיין border-radius

באמצעות border-radius ניתן לעגל את הפינות של אלמנט כדי לשפר את העיצוב ולהפוך אותו ליותר נעים לעין. ניתן גם לעגל את הפינות באופן שונה לכל פינה בנפרד.

דוגמה לשימוש ב-border-radius

להלן דוגמה לשימוש במאפיין border-radius:

בדוגמה זו, הפינות של האלמנט מעוגלות ברדיוס של 10 פיקסלים.

שימושים מתקדמים

באמצעות border-radius ניתן ליצור צורות מעוגלות יותר מתקדמות כמו מעגלים או אליפסות, ולשלב עם border-style ו-border-color כדי ליצור אפקטים עיצוביים מתקדמים.

    <div style="border: 2px solid black; border-radius: 10px; width: 100px; height: 100px;"></div>