Languages
[Edit]
PL

HTML - jak zrobić okrągły element div

0 points
Created by:
nickkk0
467

W tym artykule chcielibyśmy pokazać wam, jak stworzyć okrąg element div w HTML.

Szybkie rozwiązanie:

border-radius: 50%;

Koło - przykład

Aby stworzyć koło, musimy stworzyć styl z właściwością border-radius ustawioną na 50% i dołączyć go do naszego elementu <div>.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<html>
  <head>
    <style>
      .circle1 {
        background: red;
        border-radius: 50%; /* <-------- wymagane */
        width: 50px;
        height: 50px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="circle1"></div>
  </body>
</html>

Okrągłe elementy z obramowaniem

W poniższym przykładzie ponownie używamy właściwości border-radius ustawionej na 50%, aby nasze elementy były okrągłe. Następnie za pomocą różnych właściwości border, stylujemy nasze koła.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<html>
  <head>
    <style>
      .circle2 {
        background: yellow;
        border-radius: 50%; /* <-------- wymagane */
        border: solid;
        border-color: red;
        width: 60px;
        height: 60px;
        display: inline-block;
      }

      .circle3 {
        background: lightgreen;
        border-radius: 50%; /* <-------- wymagane */
        border: double;
        border-color: blue;
        border-width: 8px;
        width: 70px;
        height: 70px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </body>
</html>

Powiązane posty

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