[Edit]

CSS - jak zaokrąglać rogi w elemencie div

1 contributors

2 contributions

0 discussions

0 points

Created by:

Sujay

512

W tym artykule chcielibyśmy pokazać, jak zaokrąglać rogi w div w CSS.

Szybkie rozwiązanie:

xxxxxxxxxx
 
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

Edit

Poniższy przykład pokazuje użycie właściwości border-radius do utworzenia zaokrąglonego elementu <div>.

Uruchamialny przykład:

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

Auto running

Uwaga:

Właściwość border-radius może mieć od jednej do czterech wartości. Przeczytaj więcej o tej właściwości - tutaj .

Rozwiązanie 2

Edit

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:

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