Demo-примеры сайта dnzl.ru - Граница у тега body. Реализуем на псевдо-элементах.

Перейти обратно к статье Создание border (границ) у тега body

Чтобы текст не наезжал на границу, не забывайте использовать padding для тега body.

Nulla et arcu ut dui cursus dictum placerat venenatis felis. Curabitur ac turpis purus, in scelerisque est. Aenean ut eros sed diam tempor tristique. Aliquam nulla mauris, laoreet a luctus vel, fermentum ut eros. Donec porttitor pulvinar purus et tristique. Sed bibendum semper tellus, vel bibendum orci sodales et. Morbi dignissim turpis ut nisl pellentesque sed tincidunt lacus porttitor. Nunc dignissim vehicula orci luctus pharetra. Praesent arcu urna, mattis vulputate mattis suscipit, malesuada id turpis. Nulla justo mauris, vehicula in pharetra egestas, consequat ac purus. Nam sodales eleifend tellus, in tincidunt orci mollis eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vulputate, justo porttitor sollicitudin rutrum, nulla ligula adipiscing nunc, sit amet sagittis sapien magna sit amet arcu. Nulla sodales felis lorem, ut venenatis massa. Sed vehicula tellus vitae nisi pharetra pulvinar. Donec nisl lectus, scelerisque nec mollis tincidunt, ultricies eu sapien. Aliquam erat volutpat. Vestibulum leo purus, venenatis eu lacinia sit amet, rutrum nec eros. Etiam egestas luctus odio quis bibendum.

Integer mi massa, mollis ut facilisis quis, fermentum ac nisi. Aenean sed placerat quam. Curabitur ultricies interdum tortor vitae tristique. Mauris feugiat sodales ligula, vel blandit velit sagittis et. Duis hendrerit commodo vehicula. Sed in purus enim. Pellentesque lacinia, massa ut posuere mollis, odio urna consectetur sapien, sed bibendum ligula dolor quis arcu. Donec suscipit suscipit dui, in dapibus magna cursus at. Maecenas ac lacus ligula, eu rhoncus tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis sapien ante, at sollicitudin enim. In auctor blandit enim non vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pretium, erat sed rhoncus tempor, orci elit interdum odio, non sodales ante quam et magna. Pellentesque justo magna, consectetur et pulvinar sit amet, hendrerit et orci. Aliquam non purus elit. Quisque mollis, nunc ut fermentum commodo, ligula ligula bibendum leo, ut facilisis nunc odio ac nulla. Mauris molestie adipiscing risus, non tristique nibh tincidunt ac. Ut sit amet eros quam, et tempor tortor. Quisque nec tellus sapien, in pharetra dui.

Donec justo nulla, malesuada et feugiat imperdiet, ornare ac erat. Pellentesque elementum elementum lacus at tincidunt. Nunc ac nulla eros. Fusce bibendum venenatis accumsan. Duis eget felis massa, cursus viverra orci. In ut lacus a tellus consectetur euismod quis vel dui. Quisque hendrerit leo vel lorem malesuada vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non justo augue, tincidunt mollis turpis. In eros ante, ullamcorper vel dignissim vel, faucibus et purus. Donec et augue enim.

Etiam feugiat gravida neque ut congue. Vivamus risus ante, ornare at pretium at, sodales convallis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel arcu luctus orci ornare porttitor. Phasellus faucibus enim malesuada odio porta sit amet iaculis nulla sagittis. Fusce tristique laoreet ligula ac feugiat. Nam in ante sed arcu fermentum iaculis sed vitae ante. Etiam dapibus arcu in quam consequat non vestibulum nisl faucibus. Duis vel tellus quis nunc pharetra facilisis. Vivamus non nibh augue.

1 способ - Граница у тега body. Реализуем при помощи зафиксированных блоков.

2 способ - Граница у тега body. Реализуем на псевдо-элементах.

3 способ - Граница у тега body. Реализуем при помощи свойства box-shadow