Css border around whole web page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

Css border around whole web page

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

html{<!--from w w  w .j a v  a  2  s .c  o m-->
   height: 100%;
   width: 100%;
   overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
}
body{
   height:100%;
   margin: 0px;
   color: #ffff00;
   font-family: 'PT Sans', sans-serif;
   text-align: center;
   background-color: black;
   border:30px solid yellow;
}
.bottom-border {
   bottom:0;
   position:fixed;
   height:30px;
   width:100%;
   background:yellow;
   z-index:999;
}
p a {
   color: #ffff00;
   text-decoration: none;
   letter-spacing: 5px;
}
a:hover{
   color: #ffff00;
   text-decoration: none;
}
video{
   position: fixed;
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
}
img{
   max-width: 100%;
   max-height: 100%;
   display: block;
   margin: auto auto;
}
.screen {
   position: fixed;
   display: block;
   right: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   background: black;
   opacity: 0.3;
}
.container{
   min-width: 100%;
   min-height: 100%;
   margin: 0px auto;
   position: fixed;
}
.logo{
   padding-top: 100px;
   padding-bottom: 40px;
   margin: 0px auto;
   width: 60%;
}
.logo h1{
   font-size: 30px;
   letter-spacing: 4px;
}
.nav{
   padding-top: 50px;
   margin: 0px auto;
   width: 60%;
   font-size: 25px;
}
.nav-menu{
   margin: 20px auto;
   font-size: 25px;
   display: inline-block;
   transform:scale(1,1.4); /* W3C */
   -webkit-transform:scale(1,1.4); /* Safari and Chrome */
   -moz-transform:scale(1,1.4); /* Firefox */
   -ms-transform:scale(1,1.4); /* IE 9 */
   -o-transform:scale(1,1.4); /* Opera */
   padding: 13px 2px 1px 2px;
   border: 3px solid #ffff00;
   line-height: 0px;
   text-transform:
}
.nav-menu a:hover{
   color: white;
   border: 4px solid #0000;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="bottom-border"></div> 
   <div class="wrapper col-lg-12 col-md-12  col-sm-12 col-xs-12"> 
    <div class="menublock col-lg-12 col-md-12  col-sm-12 col-xs-12"> 
     <div class="logo"> 
      <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="img-responsive" alt="media and design logo"> 
      <h1>MEDIA</h1> 
     </div> 
     <div class="nav-menu"> 
      <p> <a href="#">ABOUT</a> </p> 
      <p> </p> 
     </div> 
     <div class="clear-fix"></div> 
     <div class="nav-menu"> 
      <p> <a href="#">PORJECTS</a> </p> 
     </div> 
     <div class="clear-fix"></div> 
     <div class="nav-menu"> 
      <p> <a href="#">CONTACT</a> </p> 
     </div> 
    </div> 
   </div> 
  </div> 
 </body>
</html>

Related Tutorials