Languages
[Edit]
PL

CSS - jak zaokr─ůgla─ç rogi w elemencie div

0 points
Created by:
Dirask Community
5580

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─ç:

  1. jak zaokr─ůgli─ç┬áwszystkie rogi za pomoc─ů┬áw┼éa┼Ťciwo┼Ťci┬áborder-radius,
  2. 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-radius mo┼╝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>

Powi─ůzane posty

CSS (PL)

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join