עיגול פינות

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 40 מתוך 76.

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

selector {
    border-radius: value;
}

value: הרדיוס הרצוי לפינות המעוגלות, שאפשר לציין בפיקסלים (px), ביחידות em (em), באחוזים (%) או ביחידות CSS תקינות אחרות.

אפשר לציין ערך יחיד כדי להחיל אותו רדיוס על כל ארבע הפינות. בדוגמה הבאה, לכל רכיבי <div> יהיו פינות מעוגלות ברדיוס של 10px.

div {
    border-radius: 10px;
}

אפשר להגדיר ערכים שונים לכל פינה בנפרד, לפי הסדר הבא: שמאל עליון, ימין עליון, ימין תחתון, שמאל תחתון.

.button {
    border-radius: 10px 20px 30px 40px;
}

אפשר גם לציין רק שני ערכים: הערך הראשון יחול על הפינות השמאלית העליונה והימנית התחתונה, והערך השני יחול על הפינות הימנית העליונה והשמאלית התחתונה.

img {
    border-radius: 20px 50px;
}

אתגר

קל

ניתן לך מסמך HTML עם שני רכיבי <div>, שלכל אחד מהם המחלקה "one" או "two". בצע את השלבים הבאים:

כתוב כלל CSS באמצעות בורר מחלקה כדי לבחור את כל הרכיבים עם המחלקה "one". הגדר את border לערך 3px solid #4287f5 ואת border-radius לערך 15px, כדי שלכל הפינות תהיה אותה צורה מעוגלת.
כתוב כלל CSS באמצעות בורר מחלקה כדי לבחור את כל הרכיבים עם המחלקה "two". הגדר את border לכל ערך שתבחר ואת border-radius לכל ערך שתבחר.

נסו בעצמכם

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>