Zaokrąglanie rogów bez użycia grafik
HTML + CSS

Zaokrąglanie rogów bez użycia grafik

Data aktualizacji: 18.12.2020

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+.

Ranking hostingów

Autor: Bartosz Stefanicki. Data publikacji: 13.05.2010 r. Tagi: css, grafika, html, Internet Explorer, mozilla firefox, opera, przeglądarki internetowe. Źródło obrazka porady: Pixabay.

5 komentarzy

Ostatnie komentarze

Statystyki

  • 178

    Liczba porad
  • 1 774

    Liczba komentarzy
  • 6

    Narzędzi online

© 2005-2022 itporady.pl. Wszystkie prawa zastrzeżone.

Używamy informacji zapisanych za pomocą cookies i podobnych technologii m.in. w celach reklamowych, statystycznych oraz dostosowania naszych serwisów do indywidualnych potrzeb użytkowników.