PL
CSS - jak zaokrąglać rogi w elemencie div
0
points
W tym artykule chcielibyśmy pokazać, jak zaokrąglać rogi w div w CSS.
Szybkie rozwiązanie:
div {
border-radius: 20px;
}
Istnieje kilka sposobów na zaokrąglenie elementu, ale w tym artykule przedstawimy dwa z nich w zależności od tego, które rogi chcemy zaokrąglić:
- jak zaokrąglić wszystkie rogi za pomocą właściwości
border-radius, - jak zaokrąglić wybrane rogi.
Rozwiązanie 1
Poniższy przykład pokazuje użycie właściwości border-radius do utworzenia zaokrąglonego elementu <div>.
Uruchamialny przykład:
// ONLINE-RUNNER:browser;
<!DOCTYPE >
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
background-color: goldenrod;
border-radius: 20px; /* <---------- użyj tego by zaokrąglić rogi w div */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Uwaga:
Właściwość
border-radiusmoże mieć od jednej do czterech wartości. Przeczytaj więcej o tej właściwości - tutaj .
Rozwiązanie 2
Poniższy przykład pokazuje, jak zaokrąglić dwa wybrane rogi w elemencie <div> wykorzystując właściwość border-top-left-radius dla lewego górnego rogu i analogicznie dla pozostałych rogów.
Uruchamialny przykład:
// ONLINE-RUNNER:browser;
<!DOCTYPE >
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
background-color: goldenrod;
border-top-left-radius: 25px; /* <----- lewe górne zaokrąglenie */
border-top-right-radius: 30px; /* <----- prawe górne zaokrąglenie */
border-bottom-right-radius: 40px; /* <----- prawe dolne zaokrąglenie */
border-bottom-left-radius: 50px; /* <----- lewe dolne zaokrąglenie */
}
</style>
</head>
<body>
<div></div>
</body>
</html>