Na stronie   W katalogu
     
Rozumiem I Akceptuje (X)
Ta strona używa plików cookies aby lepiej spełnić Państwa oczekiwania. Jednocześnie informuje, że można zablokować zapisywanie cookies, zmieniając ustawienia przeglądarki.


    Dodaj strone do katalogu     Dodaj reklame     Pobierz program     Dodaj do ulubionych     Kontakt   


CSS3 zaokrąglenie rogów.


Za pomocą HTML5 i CSS3 możemy zaokrąglić rogi. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.

Tak wygląda efekt.

Tak wygląda kod.

<div style="border:solid 1mm; border-color: Black; height: 5cm; width: 5cm; background: rgb(160,144,96);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

"></div>

Aby we wszystkich nowych przeglądarkach efekt był widoczny trzeba użyć kod w trzech wariantach:

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px;
  • border-radius: 10px;

10px w moim przykładzie to oczywiście średnica zaokrąglenia.


Można także zaokrąglić każdy róg podając inną średnicę zaokrąglenia. Przykład zaokrąglenia: górny lewy róg 20px, górny prawy 40px, dolny prawy 80px, dolny lewy 150px. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.


Tak wygląda kod.

<div style="border:solid 1mm; border-color: Black; height: 5cm; width: 5cm; background: rgb(160,144,96);
-webkit-border-radius: 20px 40px 80px 150px;
-moz-border-radius: 20px 40px 80px 150px;
border-radius: 20px 40px 80px 150px;

"></div>

Aby we wszystkich nowych przeglądarkach efekt był widoczny trzeba użyć kod w trzech wariantach:

  • -webkit-border-radius: 20px 40px 80px 150px;
  • -moz-border-radius: 20px 40px 80px 150px;
  • border-radius: 20px 40px 80px 150px;