how to make border around page with multicolor ?

Question

ekka 0 Newbie Poster

8 Years Ago

i need your help , i m trying to put borders around the page in the attachment ,so i try some DIY like this :

 <html>
      <head>
             <style>
body
{
    /*position : relative;*/
    height: 100%;
    max-height: 100%;
}

.top-border
{
    height: 10px;
    width: 100%;
    position : absolute;
    top : 0;
    background-color:#894aa3;
    display: inline-block;
    margin-top: -34px;

}

.left-border
{
    height: 105%;
    width : 20px;
    margin-top: -34px;
    background-color : #d0d0d0;
    position: absolute;
    left : 0;
    z-index: 1;
}

.right-border
{
    height: 105%;
    width : 20px;
    margin-top: -34px;
    background-color : #d0d0d0;
    right: 0;
    position: absolute;
    z-index: 1;
}

.bottom-border
{
    bottom: 0;
    height: 55px;
    width: 100%;
    position: absolute;
    background-color: #444444;
}

.search
{
    margin-top : -25px;
    margin-right: 50px;
    width : 218px;
    height: 28px;
    float : right;
    border : 0px;
    background-color: #ebebea;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;

}
/*
    plantagenet cherokee regular  
*/
.utopic-flowers
{
    color : #666666;
    margin-left : 30px;
    margin-top: 35px;

}

.container
{
    height : 100%;
    width : 100%;
    /*border : 10px solid black;*/
    position: relative;
}
             </style> 
      </head>

<body>
    <div class="container">
        <div class="top-border">
        </div>
        <div class="left-border">
        </div>
        <div class="right-border">
        </div>    
        <div class="bottom-border">
        </div>
        <input type="text" name="search" class="search"/>
        <h2 class="utopic-flowers">Utopic Flowers</h2>
        <p>Elit elit duis aute officia pariatur in. Dolore in eiusmod ex est minim consectetur. 
         Reprehenderit non eiusmod qui excepteur ullamco ipsum quis aliquip,Non sint enim.</p>
        </div>
   </body>
</html>

but when i try to set more text in the P tag i m getting text on bottom of the bottom border ( i want that the text to be placed above the bottom border),and if you notice in left and right the text is hidding , and the borders are not flexible, and another thing is the margin by default added on bottom of the top div ( this why i'm adding -25px in margin-top of search input).
so i try with another way :

body
{
    /*position : relative;*/
    height: 100%;
    max-height: 100%;
    border-right: 20px solid #d0d0d0;
    border-left: 20px solid #d0d0d0;
    border-top: 10px solid #894aa3;
    border-bottom : 55px solid #444444;

}

but the problem here that is not the same border in the image above, because the border of right and left need to be on the border of top and bottom, so how can i get the same borders in the image (template) above ???
thank you in advance.

html-css user-interface

2 Contributors
2 Replies
877 Views
3 Days Discussion Span
Latest Post 8 Years Ago Latest Post by ekka

Dani AI

Generated 10 Months Ago

A few quick points that tie the thread together and a simple, image-free approach you can apply.

Absolute-positioned DIVs (the first attempt) are taken out of flow, so they won't push content down — that is why text runs under the bottom bar and hides behind the sides. 's border-image solution is perfect when you want a single decorative asset with precise corners. 's container approach is also on the right track: use padding instead of negative margins so content always sits inside the visible area.

If you want the same visual (different colors on each page edge) without extra markup or an external image, use CSS custom properties plus multiple background layers on the page (or on a wrapper). Give the page padding equal to the border widths so text never overlaps, then paint four one-directional gradients (top, bottom, left, right). This produces crisp corners (stacking order decides which color overlaps) and is fully responsive.

Example (drop into your stylesheet and tune the variables):

:root{
  --top:10px; --bottom:55px; --left:20px; --right:20px;
  --top-color:#894aa3; --side-color:#d0d0d0; --bottom-color:#444444;
  --content-bg:#fff;
}

html,body{ height:100%; margin:0; }

body{
  padding: var(--top) var(--right) var(--bottom) var(--left);
  box-sizing: border-box;
  background:
    linear-gradient(var(--top-color),var(--top-color)) top/100% var(--top) no-repeat,
    linear-gradient(var(--bottom-color),var(--bottom-color)) bottom/100% var(--bottom) no-repeat,
    linear-gradient(var(--side-color),var(--side-color)) left/var(--left) 100% no-repeat,
    linear-gradient(var(--side-color),var(--side-color)) right/var(--right) 100% no-repeat,
    var(--content-bg);
}

Troubleshooting notes: reset default element margins (headings, paragraphs) so padding behaves predictably; if you want borders to scroll away with content, apply the same background/padding to a scrolling wrapper instead of body; use env(safe-area-inset-*) or extra padding on iOS if the notch overlaps your borders; use border-image when you need fancy corner artwork.

All 2 Replies

gentlemedia 803 Master Poster

8 Years Ago

Creating faux borders with empty div tags is rubbush, so don't do that :)
And the position: absolute on them take them out of the normal document flow, which means they don't have effect on other elements on the page and that's why if your paragraph grows, it goes over it and don't push the bottom border down.

The border property don't overlap each other in the corners as you've noticed, so that's also not going to work.

But... what you want can be done with the border-image and border-image-slice properties.

The image I've created and use is this:

The CSS is:

/* These first 2 block are not needed for this to work,
 * but it will make your dev-life so much easier when 
 * creating responsive layouts.
 * More info here: https://css-tricks.com/box-sizing/
 */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* ---------------------------------------- */

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding: 20px;
  border: 20px solid transparent;
  border-image: url('https://projects.gentle.media/_img/border-image.svg') round;
  border-image-slice: 33.33333333%;
}

See demo: https://codepen.io/gentlemedia/pen/XZGrPL

Edited 8 Years Ago by gentlemedia

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ekka 0 Newbie Poster · Answer 1 · 2018-03-05T01:25:20+00:00

thank you , this a wonder ful solution for general case of border but in my case i found also a beautiful solution :

 body , html{
    height : 100%;
    width : 100%;
    margin: 0;
    padding :0;
}
body
{
    height : 100%;
    width : 100%;
    background-color : #d0d0d0;
    padding : 0 20px;
    box-sizing : border-box;
}

* , *::before , *::after 
{
    box-sizing : inherit;
}

.container 
{
    background-color : #ffffff;
    border-top : 10px solid #894aa3;
    /*border-bottom : 55px solid #444444;*/
    height : 100%;
    width : 100%;
    margin: 0;
    display : table;
    /*padding : 0 30px;*/
    position : relative;
}
footer
{
    background-color: #444444;
    height : 55px;
    width : 100%;
    margin: 0;
    display : block;
}

how to make border around page with multicolor ?

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers