Kiedy ustawiasz obramowanie na kontenerze nadrzędnym, a potem patrzysz na element potomny, ramka znika. To nie błąd przeglądarki ani zaskoczenie wynikające z konkretnej wersji silnika CSS. Obramowanie po prostu nie jest właściwością dziedziczoną. Kolor tekstu przechodzi na dzieci, bo tak działa mechanizm przekazywania wartości z rodzica na potomka, ale border już nie. Warto zrozumieć, dlaczego tak jest, bo pozwala to uniknąć wielu niepotrzebnych poprawek w arkuszu stylów.

Dziedziczenie dotyczy przede wszystkim właściwości związanych z typografią i prezentacją tekstu: koloru, kroju pisma, wielkości liter, wysokości linii, wyrównania. Ramka należy do zupełnie innej grupy — opisuje wygląd konkretnego pudełka, jego krawędzi i odstępów. Gdyby border dziedziczył się domyślnie, każdy element wewnątrz kontenera dostałby własną ramkę, co szybko zamieniłoby układ w nieczytelny stos prostokątów. Przeglądarki zachowują się więc racjonalnie, a nie kapryśnie. Jeśli chcesz prześledzić, jak dokładnie rozkłada się to na poszczególne właściwości, zajrzyj do omówienia dziedziczenia właściwości — porządkuje ono reguły, które łatwo pomylić podczas pisania styli.

Praktyczny wniosek jest taki: ramkę trzeba świadomie powtórzyć na dziecku albo przenieść na inny element w strukturze. Częstym błędem jest zakładanie, że skoro kontener ma obramowanie, to jego zawartość też je odziedziczy. Nic z tego. Możesz zamiast tego zastosować obramowanie na pseudoelemencie, użyć obrysu, albo po prostu dodać klasę potomkowi i nadać mu border ręcznie. Warto też pamiętać, że właściwości niezwiązane z tekstem wymagają jawnego ustawienia, jeśli mają pojawić się na niższym poziomie drzewa. Ta sama zasada dotyczy marginesów, paddingów i tła — one również nie przechodzą w dół automatycznie.

Świadomość tego podziału oszczędza czas przy debugowaniu. Kiedy element nie wygląda tak, jak zakładałeś, pierwszym pytaniem powinno być: czy ta właściwość w ogóle podlega dziedziczeniu. Jeśli nie, szukanie problemu w kaskadzie i specyficzności selektorów nie ma sensu. Lepiej od razu sprawdzić, czy wartość została nadana bezpośrednio na właściwym elemencie. Taka kolejność myślenia skraca pracę i ogranicza liczbę obejść, które później trudno utrzymać.