CSS: איך עושים פינות מעוגלות

שתף בפייסבוק

טוויטר

שלא כמו בעבר שמעצבי אתרים היו צריכים לערוך תמונת רקע עם פינות מעוגלות ולהטמיע מאחורי טקסט או אלמנט אחר, כיום ניתן באמצעות CSS Style פשוט לקבל אלמנט עם פינות מעוגלות, כמו למשל: שדה טקסט בטופס עם פינות מעוגלות או Div עם פינות מעוגלות וכיוצא באלה.

כל מה שצריך לעשות הוא להפעיל את הסטייל הבא של CSS על האלמנט שרוצים לעגל את פינותיו. לדוגמא:

.textfield {
border: 2px solid #a44441;
border-radius: 25px; 
}

ברגע שנחיל סטייל זה על השדות בטופס, קוד זה ייתן לנו שדות טקסט מרובעים עם מסגרת של 2 פיקסלים בקו אחיד ובצבע שהוגדר בהקסה עם פינות מעוגלות ברדיוס 25 פיקסלים. כמובן, שניתן להוסיף הגדרות עיצוב ולשנות את רדיוס הפינות למידות אחרות. ככל שמידת הרדיוס תהיה גדולה, הפינות תהיינה מעוגלות יותר ולהיפך.

שתף בפייסבוק

טוויטר