html okrągły obszar ograniczający wyjście poza niego elementu przykład html
border-radius: 50% z overflow: hidden na kontenerze. clip-path: circle() (lub nawet maski SVG/CSS mask) – daje to większą elastyczność i animowalność kształtu. Kluczowe punkty
width i height), aby border-radius: 50% utworzył idealne koło. overflow: hidden lub clip-path fizycznie „przycina” wszystko, co wychodzi poza obrys koła. border-radius; w nowoczesnych aplikacjach można bezpiecznie używać clip-path. border-radius + overflow (fallback-safe)<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Okrągły kontener – border-radius</title>
<style>
.circle {
width: 220px;
height: 220px;
border-radius: 50%; /* kształt koła */
overflow: hidden; /* ukrywa nadmiar */
position: relative; /* kontekst dla pozycji absolutnych */
box-shadow: 0 4px 18px #0003;
}
.circle img { /* dowolna zawartość – tu obraz */
width: 100%;
height: 100%;
object-fit: cover; /* zachowuje proporcje, wypełniając koło */
}
</style>
</head>
<body>
<div class="circle">
<img src="https://picsum.photos/id/1059/400/400" alt="Przykładowy obraz">
</div>
</body>
</html>Teoretyczne podstawy
border-radius: 50% liczy się od wymiarów ramki, więc dla kwadratu r-d=50 % → promień=½ boku. overflow: hidden aktywuje clipping na zrenderowanym obszarze boksa. Zastosowania praktyczne
• awatary, miniatury w galeriach, przycinki wideo (HTML5 <video> w kontenerze), dynamiczne wskaźniki na pulpitach IoT itp.
clip-path: circle() (większa swoboda)<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Okrągły kontener – clip-path</title>
<style>
.clipped {
width: 240px;
height: 240px;
background: url("https://picsum.photos/id/1069/480") center/cover;
clip-path: circle(50% at 50% 50%); /* promień = 50% szer. elem., środek 50/50 */
transition: clip-path .4s;
}
.clipped:hover { /* pokazuje, że kształt można animować */
clip-path: circle(60% at 50% 50%);
}
</style>
</head>
<body>
<div class="clipped"></div>
</body>
</html>Zalety
• dowolne kształty (polygon, ellipse, zewnętrzne ścieżki SVG), płynne animacje, brak wymogu kwadratu.
Wady
• brak wsparcia w IE 11; dla Safari < 15 czasem potrzebny prefiks -webkit-clip-path.
clip-path i mask-composite we wszystkich evergreen-przeglądarkach; Edge 119+ i Chrome 117+ dodatkowo obsługują maski CSS Houdini (@property, animacje niestandardowe). container-queries ułatwiają responsywne skalowanie okrągłych masek bez JS. anchor positioning (CSS Anchors) – pozwoli dynamicznie zakotwiczać zawartość wewnątrz klipu względem wskazanego punktu. Przyszłe kierunki
• Deklaratywne efekty „view-transition” (Chrome 111+) umożliwią płynne przejścia między stanami z różnymi clip-path.
• WebGPU / WebGL-powered maskowanie dla wymagających wizualizacji w dashboardach IoT lub grach webowych.
overflow: hidden działa jak fizyczna foremka do wykrawania ciastek; element-dziecko to ciasto – widzimy tylko to, co zmieściło się w foremce. object-fit: cover lub background-size: cover, aby obraz nie był rozciągany. position: absolute, transform) wciąż obowiązuje clipping – nic nie „wycieknie”. .clip {
-webkit-clip-path: circle(50%);
clip-path: circle(50%);
}will-change: clip-path lub contain: paint – zapobiega to re-paiting całej strony. overflow użyj pointer-events: none na nadmiarowej części lub warstwy pseudo-elementu. clip-path działają tylko z prefiksem; może to utrudnić animacje zależne od --radius. border-radius w procentach liczy się od wymiarów elementu; dla prostokątów otrzymasz elipsę, nie pełne koło. transform: translateZ) maskowanie wciąż działa, ale może wymagać transform-style: preserve-3d + backface-visibility: hidden. mask-image + gradieny konikalne (conic-gradient) → miękkie, półprzezroczyste brzegowe przycinanie. <clipPath> z animacją SMIL lub GSAP dla złożonych tras. shape-outside – pozwala tekstowi „oblewać” zewnętrzną krawędź koła. Utworzenie okrągłego obszaru, który nie przepuszcza zawartości na zewnątrz, sprowadza się do:
border-radius: 50% + overflow: hidden (gwarantowana zgodność, najmniej problemów) lub clip-path: circle() (większa kontrola, animacje, brak dodatkowego elementu). Wybór metody zależy od wymagań dotyczących kompatybilności, elastyczności kształtu i planowanych efektów. Obie techniki są dziś w pełni wspierane w najpopularniejszych przeglądarkach, więc zachęcam do eksperymentów i łączenia ich z nowymi możliwościami CSS, takimi jak maski, Houdini czy view-transitions.