logo
  Versiering
  Je kan met een border hele mooie versieringen maken. Hier een aantal voorbeelden.


Dit is echt een border

 
TUSSEN DE BODY TAGS
<div id="sier">tekst</div>
IN DE CSS
#sier{
border-width: 0px 12px 0px 12px;
border-style: double;
border-color: rgb(100,200,225);
border-radius:40px 40px 60px 60px;
-moz-border-radius:40px 40px 60px 60px;
-webkit-border-radius:40px 40px 60px 60px;
height:100px;
width:200px;
padding-left:10px;
 


    Een border

 
TUSSEN DE BODY TAGS
<div id="blad">tekst</div>
IN DE CSS
#blad{
border-width: 10px;
border-style: double;
border-color: rgb(100,200,225);
border-radius: 0 120px 0 120px;
-moz-border-radius: 0 120px 0 120px;
-webkit-border-radius: 0 120px 0 120px;
height:100px;
width:200px;
 



  Een border

 
TUSSEN DE BODY TAGS
<div id="rondje">tekst</div>
IN DE CSS
#rondje {
border-width: 4px;
border-style: double;
border-color: rgb(100,200,225);
border-radius: 120px;
-moz-border-radius:120px;
-webkit-border-radius:120px;
height:100px;
width:100px;}
 



   Een border

 
TUSSEN DE BODY TAGS
<div class="borders">tekst</div>
IN DE CSS
.borders {
border: solid 1px rgb(100,200,225);
padding: 5px;
background-clip: content-box; /* support: IE9+ */
background-color: rgb(200,200,210);
height:100px;
width:200px;}
 

  een border

 
TUSSEN DE BODY TAGS
<div id="box">tekst</div>
IN DE CSS
#box {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
position: relative;}
#box:before {
border: 1px solid white;
content: '';
width: 198px;
height: 198px;
position: absolute;}
#box:after {
content: '';
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #bbbbbb;
left: 1px; top: 1px;}

 
 Border
 
TUSSEN DE BODY TAGS
<div class="top-to-bottom">Border</div>
IN DE CSS
.top-to-bottom {
border-width: 2px;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 0 100%, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image: -moz-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(to bottom, white, rgba(0, 0, 0, 0)) 1 100%;
height:100px;
width:200px;}
 
 Border

 
TUSSEN DE BODY TAGS
<div class="bottom-to-top">&nbsp;Border</div>
IN DE CSS
.bottom-to-top
{ border-width: 2px;
border-style: solid;
-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
height:100px; width:200px;}
 
 Border
 
TUSSEN DE BODY TAGS
<div class="left-to-right">&nbsp;Border</div>
IN DE CSS
.left-to-right { border-width: 5px 0 5px 5px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%; height:150px;}
 
 Border
 
TUSSEN DE BODY TAGS
<div class="right-to-left">Border</div>
IN DE CSS
.right-to-left {
border-width: 10px 10px 10px 0;
border-style: solid;
-webkit-border-image: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%;
height:100px; width:200px;}
 
Border

 
TUSSEN DE BODY TAGS
<div class="gradient-top-to-bottom">Your Text goes here.</div>
IN DE CSS
.gradient-top-to-bottom{
width: 300px;
padding: 20px;
border-top: 7px solid #000;
border-bottom: 7px solid #96B7E5;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#96B7E5));
background-image: -webkit-linear-gradient(#000, #96B7E5);
background-image: -moz-linear-gradient(#000, #96B7E5),
-moz-linear-gradient(#000, #ccc);
background-image: -o-linear-gradient(#000, #96B7E5),
-o-linear-gradient(#000, #ccc);
background-image: linear-gradient(#000, #96B7E5),
linear-gradient(#000, #96B7E5);
-moz-background-size:7px 100%;
background-size:7px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;}

 
eind