Zaokrąglanie rogów bez użycia grafik

Bartosz

Bartosz Stefanicki Poniedziałek, 22.04.2024

Zaokrąglanie rogów bez użycia grafik

Zaokrąglenie rogów można stosować 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+.

Warto zobaczyć

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Maj 2024).

Data publikacji: Czwartek, 13.05.2010. Tagi: css, grafika, html, Internet Explorer, mozilla firefox, opera, przeglądarki internetowe. Źródło obrazka Pixabay, Font awesome.

9 komentarzy


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

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.