CSS body border using border image

Question

CSS body border using border image

138 Views Asked by Chopin At 26 April 2025 at 01:48

I'm trying to create a body border pretty much exactly like the one in this example: it changes with the size of the window, but isn't affected by overflow.

https://css-tricks.com/examples/BodyBorder/

I can't find any information on how to do this with a border-image specifically, though. I've already got my border-image and its parameters all set up; I just can't figure out how to apply it to the body without being broken by overflow, all the snippets of code I've tried have either prevented scrolling entirely, such that overflow simply disappears above the page, or have failed to prevent the border from being interrupted by overflow.

It'd be nice if, to boot, there were some convenient way to have an area at the edge of the border where overflow text will fade.

Edit: adding style code. In response to one of the comments, I want to use an image specifically--a border image, not just color. I'm just wanting to adapt the border image style I already have working.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: ;
  color: white;
  word-break: break-all;
  font-weight: normal; text-shadow: .3vw .3vw #000000; font-size: 4vw; text-align: center; margin: 4vw;
}
body {
  border: 1px solid transparent;
  padding: 0px;
  border-image: url(border.png) 10% round;
  border-image-slice: 26 26 26 26;
  border-image-width: 3vw 3vw 3vw 3vw;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
}
html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat: no-repeat;
    background: -webkit-linear-gradient(#6363BD, #000052);
    background: -moz-linear-gradient(#6363BD, #000052);
    background: -ms-linear-gradient(#6363BD, #000052);
    background: -o-linear-gradient(#6363BD, #000052);
    background: linear-gradient(#6363BD, #000052);
}

</style>

Original Q&A

There are 2 best solutions below

**sol** · Answer 1

You could use a separate element for the effect, instead of styling body directly.

:root {
  --page-border-width: 3vw;
}

* {
  box-sizing: border-box;
}

body {
  background: #6363bd;
  padding: var(--page-border-width);
  margin: 0;
}

.page-border {
  border: 1px solid transparent;
  border-image: url(https://placehold.it/10) 10% round;
  border-image-slice: 26 26 26 26;
  border-image-width: var(--page-border-width);
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.page-border:after {
  content: '';
  background-image: linear-gradient(transparent, hsla(0, 0%, 0%, .5));
  height: 20vh;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
}

p:first-of-type {
  margin-top: 0;
}

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="page-border"></div>

**mkafiyan** · Answer 2

this may help you. you don't need to use border-image it can easily handle just with border and it's flexible too depends on the size of window. although using overflow-x is not a best way!

HTML codes:

<body>
  <div class="flex">
    <p>
       blablabla
    </p>
    <p>
       blablabla
    </p>
    <p>
       blablabla
    </p>
    <p>
       blablabla
    </p>
  </div>

Css code

body{
  background-color:#fff;
  height:100%;
  width:100%;
  overflow-x: hidden;
}
.flex{
  width: auto;
  height:auto;
  border:50px solid blue;
  display:block;
}
p{
    width: auto;
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 20px;
    padding-left: 20px;
}

you can find jsfidle here

CSS body border using border image

There are 2 best solutions below

Related Questions in CSS

Related Questions in BORDER-IMAGE

Trending Questions

Popular # Hahtags

Popular Questions