Zaokrąglanie rogów bez użycia grafik

Zaokrąglanie rogów bez użycia grafik

HTML + CSS Data aktualizacji: 15.12.2019

Zaokrąglanie rogów bez użycia grafik

Webmasterzy coraz częściej korzystają z opcji zaokrąglania rogów. Stosować ją można na obrazkach, tabelach, elementach blokowych. Ale nie tylko - ogranicza nas w tym przypadku tylko wyobraźnia.

Rozwiązanie jest proste i polega na skorzystaniu z dobrodziejstw oferowanych przez Kaskadowe Arkusze Stylów (CSS). Warto wiedzieć, że do najnowszej wersji 3 została dodana funkcjonalność border-radius. Umożliwia ona zaokrąglenie rogów we wskazanych elementach blokowych, za pomocą dodania do arkusza zaledwie jednej linijki kodu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.

    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    border-radius:6px 5px;
    border-radius:6px;
  • border-top-left-radius - lewy górny róg
  • border-top-right-radius - prawy górny róg
  • border-bottom-left-radius - lewy dolny róg
  • border-bottom-right-radius - prawy dolny róg
  • border-radius: 6px 5px - wszystkie rogi: 6px na X, 5px na Y
  • border-radius: 6px - wszystkie rogi: 6px

Zaokrąglanie rogów obsługują najpopularniejsze przeglądarki: Google Chrome 5.0+, Internet Explorer 9.0+, Mozilla Firefox 4.0+, Safari 5.0+ i Opera 10.5+.

dhosting

Autor: Bartosz Stefanicki. Data publikacji: 13.05.2010. Tagi: css, grafika, html, Internet Explorer, mozilla firefox, opera, przeglądarki internetowe.

Komentarze