ו-

:

< גוּף >

< div מעמד = 'פינה' >

< h1 > רמז ללינוקס < / h1 >

< ע > פינות עגולות ב-CSS < / ע >

< / div >

< / גוּף >

לאחר מכן, נעבור לקטע CSS.

הנה ה ' .פינה ' משמש לגישה למחלקה שהוקצתה ל-

. לאחר מכן, ניצור גבול באמצעות ' גבול ' מאפיין ולהקצות את הערכים של רוחב, סגנון וצבע בתור ' 4 פיקסלים ', ' מוצק ', ו' rgb(248, 6, 107) ', בהתאמה. יתר על כן, נוסיף את הרוחב ' 250 פיקסלים ', גובה' 150 פיקסלים ', וצבע רקע ' rgb(234, 0, 255) ' עבור ה-div:

.פינה {

גבול : 4 פיקסלים מוצק rgb ( 248 , 6 , 107 ) ;

רוֹחַב : 250 פיקסלים ;

גוֹבַה : 150 פיקסלים ;

צבע רקע : rgb ( 2. 3. 4 , 0 , 255 ) ;

}

לאחר שיישמת את הקוד שהוזכר לעיל, עבור אל קובץ ה-HTML והפעל אותו. אתה תראה את התוצאה הבאה:

כעת, נעבור לחלק הבא, בו ניצור את הגבול המרובע לגבול הפינה העגול.

כיצד לעגל פינה באמצעות CSS?

כדי ליצור גבול פינתי עגול, ' גבול-רדיוס נעשה שימוש בנכס, שבו אתה יכול להגדיר את רדיוס הפינה בהתאם להעדפותיך.

תחביר

תחביר של תכונת הגבול-רדיוס ניתן להלן:

גבול-רדיוס : ערך

בואו נמשיך בדוגמה הקודמת ונקבע את רדיוס הגבול כדי להשיג פינות עגולות.

דוגמא

ב' .פינה ' מחלקה של קובץ ה-CSS, הגדר את הערך של ' רדיוס הגבול 'נכס כ' 30 פיקסלים ”:

גבול-רדיוס : 30 פיקסלים ;

עם הוספת השורה לעיל, תקבל את הפלט הבא:

הפלט הנתון לעיל מסמל שהגבולות משתנים בהצלחה לפינות עגולות בגלל תכונת הגבול-רדיוס.

סיכום

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