how to make border around page with multicolor ?

Question

ekka 0 Newbie Poster

6 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

2 Contributors
2 Replies
842 Views
3 Days Discussion Span
Latest Post 6 Years Ago Latest Post by ekka

gentlemedia 803 Master Poster

6 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: https://projects.gentle.media/_img/border-image.svg

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 6 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 @gentlemedia , 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;
}