עיגול פינות

חלק מהיחידה עיצוב באמצעות 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”. הגדר את הגבול ל־3px solid #4287f5 ואת border-radius ל־15px כדי לתת לכל הפינות אותה צורה מעוגלת.
כתוב כלל CSS באמצעות בורר מחלקה כדי לבחור את כל הרכיבים עם המחלקה “two”. הגדר את הגבול ל־any value ואת border-radius ל־any value לבחירתך.

נסו בעצמכם

<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>