#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. User Avatar
    Michael

    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

    • User Avatar
      Chris Coyier

      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.

    • User Avatar
      Michael Warren

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

  2. User Avatar
    Attila Hajzer

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

    • User Avatar
      Chris Coyier

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

  3. User Avatar
    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. User Avatar
    amrabdelaziz

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

  5. User Avatar
    Atsiliepimai

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

  6. User Avatar
    Nils

    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. User Avatar
    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

    • User Avatar
      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. User Avatar
    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. User Avatar
    Jack Minardi
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag