Grow your CSS skills. Land your dream job.

#98: Playing with Body Borders

Putting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so that the borders don't scroll away as the page scrolls? And what about IE? And what about mobile devices? We look at a bunch of techniques for doing the body border, but they journey and technologies we look at on the way there are the interesting part.

Links from the video:

Comments

  1. Chris-

    This might be a silly question, but if you wanted border on the body, and your vid suggests using pseudo elements to accomplish the top and bottom borders, but using just CSS borders on the body element for the left and right, why wouldnt you just use all the borders on the element?

    ~M

    • Because the top border will scroll aways when the page scrolls and the bottom border will only be visible once you’ve scrolled down. Fine, just different. Both are covered in video.

    • gotcha! Its more for the sticky, always visible effect rather than just a simpler regular border. Cool. :)

  2. whats the difference between using BODY, and HTML for this . instad of divs?

    • Because you automatically have a body and html element, you are adding additional markup solely for the sake of design.

  3. Saad

    I don’t know why but I always get the feeling of breaking the web while working with pseudo elements in such a way. Either way you are a genius Chris . Awesome job at keeping the markup semantic.

  4. Chris Coyier sorry Xcod not supply to windows ^^
    i will buy Mac soon but wt i do now ?

  5. Web page is beauty for me, when it looks like autonomic software. The inner borders is helping int this :)

  6. I like this effect a lot and how it has no affect on the content of the page. I would have never thought of this on my own. gj!

  7. Zulqarnain
    Permalink to comment#

    Dear sir!
    i am new to the designing world. you are and expert and i want some help.
    please tell me that how can i manage my screen resolution. what is the best way and also that how can i tackle my data i want that when my data become larger so it font size become smaller in size and re-size itself in the that specific resolution.
    thnks

    • Umar
      Permalink to comment#

      Hey

      Use %age for your container’s width and height and specify max width and height .

      For font size use em instead of pixels.

  8. Der
    Permalink to comment#

    Chris what is the player you use to play your video i like how it look what can i get it or buy it please tell

  9. Permalink to comment#

    Using the second method you demonstrated (pseudo-elements) seems to be following the letter of the law while missing the intent. Separating style and content was done to increase readability and encourage good practices, but in instances like this it appears to accomplish the opposite of these goals

    Just image the border as an element itself rather than a style on an element to assuage your mental model.

  10. John
    Permalink to comment#

    Great post. Liked to see how you debug/test…that helps a lot.

    Liked the media query test, iOS device tests, psuedo tags.

  11. Nir Yenni

    Great video! Helped me a lot.

    I have a question.. Can I make the body-border with margin of 20px?
    I managed to do so with the DIV & classes (border bottom, top etc.) technique,
    but couldn’t do it with the body:before body:after method – it seems that the right & left borders (upper and lower parts) aren’t affected of this (because they aren’t fixed).

    Is there any solution? or should I use the first technique only?

    Thanks! :)

  12. Arunas
    Permalink to comment#

    Hey I was just wondering here. And Im a little late for discussion but I tried this method of sticky borders and when my:
    .page-wrap -has- { margin: 30px auto; } the side borders does not reach top and bottom by 30pxls. Any way to fix this?

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".