foto html - css     . Border - Versiering

Je kan met een border hele mooie versieringen maken. Soms zijn het kleine scriptjes en soms grote. Hier een aantal voorbeelden.


Dit is echt een border

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;

Tussen de bodytags

<div id="sier">tekst</div>


 
Een border

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;

Tussen de bodytags

<div id="blad">tekst</div>

Een border

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;}

Tussen de bodytags

<div id="rondje">tekst</div>



   Een border

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;}

Tussen de bodytags

<div class="borders">tekst</div&gt

een border

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;}

Tussen de bodytags

<div id="box">tekst</div>

 Border

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;}

Tussen de bodytags

<div class="top-to-bottom">Border</div>

 Border

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;}

Tussen de bodytags

<div class="bottom-to-top">&nbsp;Border</div>

 Border

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;}

Tussen de bodytags

<div class="left-to-right">&nbsp;Border</div>

 Border

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;}

Tussen de bodytags

<div class="right-to-left">Border</div>

Border

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;}

Tussen de bodytags

<div class="gradient-top-to-bottom">Your Text goes here.</div>

Border

In de css

.border {border: 3px solid #ffffff;
padding:10px;
width:500px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
border-radius: 36px / 12px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
height:50px;}

Tussen de bodytags

<div class="border01">Border</div>

Border

In de css

.border {border: 3px solid #ffffff;
padding:10px;
width:500px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
border-radius: 36px / 12px;
-webkit-transform: rotate(-5deg);
height:50px}

Tussen de bodytags

<div class="border">tekst</div>

Border

In de css

.border {border: 3px solid #ffffff;
padding:10px;
width:500px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
border-radius: 36px / 12px;
-webkit-transform: skew(5deg,5deg);
height:50px}

Tussen de bodytags

<div class="border">tekst</div>

    Border

In de css

.border {border: 3px solid #ffffff;
border-top-left-radius: 100px 50px;
padding:10px;
width:500px;
height:50px}

Tussen de bodytags

<div class="border">tekst</div>

    Border

In de css

.border06 {border: 3px solid #ffffff;
border-radius: 200px;
padding:40px;
width:200px;
height:200px}

Tussen de bodytags

<div class="border">tekst</div>

end
terug
home