Question 237759 in Html Question posted in
Some basic documentation can be found here.

Html – Adding fixed border around body

I have created a border around the website by using

#top,
#bottom,
#left,
#right {
  background: #a5ebff;
  position: fixed;
}

#left,
#right {
  top: 0;
  bottom: 0;
  width: 15px;
}

#left {
  left: 0;
}

#right {
  right: 0;
}

#top,
#bottom {
  left: 0;
  right: 0;
  height: 15px;
}

#top {
  top: 0;
}

#bottom {
  bottom: 0;
}
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

Now this is probably a little bit outdate – is there a better, more optimized way to do this?

Tags:

6

Answers


  1. 0

    I would suggest creating a div with the border you need so to avoid creating 4 elements just for this.

    .border {
  border: #a5ebff 15px solid;
  position: fixed;
  inset: 0;
}
    <div class="border"></div>

    This is a lot less code for the same result.

    As a sidenote, avoid using css on ids, its better to use a class.

    Login or Signup to reply.
  2. 0 
    body {
  margin: 0; /* The body has a default margin, which needs to be overridden to 0 */
}

.container {
  margin: 0;
  width: 100vw; /* Set the width of the div equal to the space occupied by the body */
  height: 100vh; /* Set the height of the div equal to the space occupied by the body */
  box-sizing: border-box; /* Set it up so that beyond the set width and height, the border doesn't protrude (thus, the 15px will be included in the 100%) */
  overflow: auto; /* It's not necessary; if there's more content within the div than can fit, it should be scrollable */

  border: 15px solid #a5ebff; /* Set the border (width, type, color) */
}
    <div class="container">
  <!-- Content of the page that is within the outline, goes here -->
</div>
    Login or Signup to reply.
  3. 0

    You could simply give the body a border or a wrapping div, no need for four separate elements. Also add box-sizing: border-box;.

    See a simple example below:

    * {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  max-height: 100%;
}
body {
  height: 100%;
  box-sizing: border-box;
}
.wrapper {
  padding: 15px;
  border: 15px solid #7777ff;
  height: 100%;
  max-height: 100%;
  overflow: scroll;
  box-sizing: border-box;
}
    <body>
  <div class="wrapper">
    <h1>My Content</h1>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
    <p>Lorem whatever</p>
  </div>
</body>
    Login or Signup to reply.
  4. 0

    Here is a more modern approach using CSS box-shadow on the body or a container div.

    body {
    margin: 0;
    height: 100vh; 
    box-shadow: inset 0 15px 0 #a5ebff, 
                inset 0 -15px 0 #a5ebff, 
                inset 15px 0 0 #a5ebff, 
                inset -15px 0 0 #a5ebff;
}
    <body>
    <div style="padding: 20px;">
    
    </div>
</body>

    This will create an inset shadow on all four sides of your website, making it look like a border around your content. This way, you don’t need extra div elements for the borders. Adjust the pixel values as necessary.

    Login or Signup to reply.
  5. 0

    This is often called a "holy grail" layout or similar with 5 main sections. Keep or remove those you need. Ugly here just to show what is where.

    Using grid layout we can either use names or as I did grid-column to put stuff in the grid.

    I put a comment where the border specific to the question was placed. Note using grid like this avoids the challenges with layout seen by using fixed or other positioning which gets out of hand quickly as the layout grows and this is more responsive on phones etc.

    body {
  /*set some defaults */
  font-size: 16px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 100vh;
}

.section {
  border: dashed green 3px;
}

.page-container {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
  /* question specific put a border around it; light blue in this case */
  border: solid 1em #a5ebff;
}

.header-container {
  padding: 2em;
  grid-column: 1 / 4;
}

.left-container {
  grid-column: 1 / 2;
}

.content-container {
  grid-column: 2 / 3;
}

.right-container {
  grid-column: 3 / 4;
}

.footer-container {
  grid-column: 1 / 4;
}


/* just style below here */

.header-container {
  display: grid;
  grid-template-columns: 1fr auto;
  background-color: #ff222222;
}

.header-container .title {
  border: 1px solid blue;
}

.right-container {
  background-color: #ffff2222;
}

.left-container {
  background-color: #ff222222;
}

.content-container {
  /*super center the content */
  display: grid;
  place-items: center;
  padding: 1em;
  background-color: #2222ff22;
}

.footer-container {
  background-color: #22222222;
  text-align: center;
  padding: 1em;
}
    <div class="page-container">
  <header class="section header-container">
    <div class="title">Header</div>
    <div class="other-thing">Other</div>
  </header>
  <div class="blue section left-container">Left Sidebar</div>
  <main class="section coral content-container"> Main Content</main>
  <div class=" yellow section right-container">Right Sidebar</div>
  <footer class="green section footer-container">Footer</footer>
</div>
    Login or Signup to reply.
  6. 0

    How about this one?

    (I’d also like to read comments why this might be no good solution)

    body {
            margin: 0;
            padding: 15px;
            border: 15px solid #7777ff;
        }
        /* forcing overflow */
        div {
            padding: 50px;
        }
    <div>my awesome content</div>

<div>more awesome content</div>

<div>even more awesome content</div>

<div>and some lipsum</div>

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor enim libero, id tincidunt elit condimentum vel. Suspendisse vitae rutrum sapien. Quisque fermentum dolor in risus lobortis feugiat. Ut a arcu vitae felis euismod egestas id sit amet lorem. Mauris iaculis mattis tempus. Quisque a elit imperdiet est gravida molestie in ac tellus. In pulvinar felis quam, eget cursus tellus faucibus sed. Cras egestas convallis pharetra. Vestibulum semper aliquet massa sed imperdiet. Aenean vitae magna euismod lorem vulputate eleifend. Mauris pretium tellus sed elit vulputate pulvinar.</div>

<div> Sed ultricies dolor in nunc fringilla fermentum. Proin egestas lacus nulla, ac interdum lorem auctor a. Sed lacinia mauris id dapibus convallis. Nam laoreet tincidunt laoreet. Nam lectus arcu, vehicula efficitur semper quis, sollicitudin vitae nisl. Nunc in eleifend ligula, nec eleifend mi. Aliquam id sem vel nisi porttitor egestas.</div>

<div> Aliquam eget tortor dictum, consectetur purus sed, rutrum est. Aliquam bibendum et dui eget varius. Proin erat sapien, feugiat vel vulputate quis, bibendum et nisl. Aenean porta purus arcu, non eleifend ante feugiat eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec lectus lacus, ultrices eu ex a, molestie dignissim elit. Quisque id commodo lorem. Vivamus sit amet massa vitae est ultrices volutpat.</div>

<div> Vestibulum ornare ac enim ac fringilla. Nullam ac enim ac arcu commodo egestas quis non metus. Phasellus suscipit arcu id odio sagittis, sed facilisis neque finibus. Morbi eleifend justo sed consectetur facilisis. Morbi urna turpis, feugiat eu ultrices ac, porttitor sed nisl. Nullam suscipit velit est, ac consectetur ante sodales at. Nulla cursus sapien sed quam viverra, vel tempor mi finibus. Sed euismod nunc dapibus, auctor tortor ac, faucibus mi. Mauris tempus ligula mi, id cursus orci aliquet eget. Mauris a laoreet justo. Cras nibh risus, tristique sed leo quis, rhoncus suscipit tellus. Sed sapien tortor, vehicula id molestie ut, rutrum id mi. Pellentesque ultricies luctus nibh interdum rutrum. Nullam volutpat ut elit quis molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pellentesque fermentum.</div>

<div> Morbi vehicula ante in justo pharetra, eget laoreet mi ultricies. Pellentesque volutpat placerat ante ac pellentesque. Donec faucibus tortor orci, eget commodo tortor tincidunt ut. Sed ut orci felis. Quisque magna augue, sollicitudin eget viverra posuere, blandit vitae elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur maximus magna pellentesque ex finibus ultricies. Curabitur nulla metus, dignissim ullamcorper nisl in, consequat rhoncus tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur aliquet porttitor turpis at scelerisque. Cras aliquam congue nisi. Sed tempor pretium arcu. Proin ultricies ligula ut nulla vehicula posuere.</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search