logo
  Ronde hoeken
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tegenwoordig is alles hoekig en dan valt een border met ronde hoeken wel op en dat ziet er ook mooier uit. Dit scriptje is ook helemaal niet zo moeilijk.

 
IN DE CSS
.rounded-corners {
background-color:#CCC;
border-radius: 10px; /* Future Proof & IE9 */
-webkit-border-radius: 10px; /* Safari & Chrome */
-moz-border-radius: 10px; /* Firefox */
-o-border-radius: 10px; /* Opera */
padding:10px;
}

 
TUSSEN DE BODY TAGS
<table width="400" border="0" cellpadding="0" cellspacing="0" class="rounded-corners">
<tr>
<td valign="top">tekst</td>
</tr>
</table>

  Ronde hoeken met div Werk je liever met div's, dan kan dat ook: (ik heb er even een schaduw bij gedaan... vond ik wel mooi)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 
IN DE CSS
#container{
width:400px;
position:relative;
left:230px;
margin-left:-225px;}
#hoekje {
behavior: url('ie-css3.htc');
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: 4px 4px 4px #A5A5A5;
-webkit-box-shadow: 4px 4px 4px #A5A5A5;
box-shadow: 4px 4px 4px #A5A5A5;
width:400px;
background:#DCDCDC;
padding:10px;
margin: 0 0 0 0;}

 
TUSSEN DE BODY TAGS
<div id="container">
<div id="hoekje">Jou tekst
</div></div>

  Download HIER even het kleine bestandje die je hiervoor nodig hebt en zet deze in dezelfde map.

Het kan ook korter zonder schaduw:

 
IN DE CSS
div {
border: 1px solid;
border-radius: 25px;}

 
TUSSEN DE BODY TAGS
</div>Hier jou tekst</div>

  Ronde hoeken met foto's:
Ook foto's die gewoon rechthoekig zijn kunnen voorzien worden van ronde hoeken, alleen heb ik hier een klein grapje uitgehaald, ga maar eens met je muis over de eerste foto. Natuurlijk moet je er zelf een beetje mee spelen met dit script, want je kan er best iets leuks mee doen.

.

 
IN DE CSS
.foto{
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px}
.foto:hover{
-webkit-border-radius: 35px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 35px;
-moz-border-radius-bottomright: 0;
border-radius: 35px;
border-bottom-right-radius: 0;}

 
TUSSEN DE BODY TAGS
<img src="fotos/06.jpg" width="250" height="188" class="foto"

  Ronde deukjes met div's:
In plaats van ronde hoeken, kan je het tegenovergestelde nemen, dit lijkt meer op iets klassieks

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 
IN DE CSS
.urhoeken {background:transparent; width:80%; /* boxbreedte */}
.urb1, .urb2, .urb3, .urb4 {display:block; overflow:hidden; height:1px;font-size:1px;}
.urb2, .urb3, .urb4 {background:transparent; border-left:1px solid #000000; border-right:1px solid #000000;}
.urb1 {margin:0 4px; background:#000000;}
.urb2 {margin:0 4px; height:2px;}
.urb3 {margin:0 3px;}
.urb4 {margin:0; height:1px; border-width:0 3px 0 3px;}
.urboxinhoud {
display:block;
background:transparent;
border:0 solid #000000;
border-width:0 1px;
padding: 5px;}

 
TUSSEN DE BODY TAGS
<div class="urhoeken"> <b class="urb1"></b><b class="urb2"></b><b class="urb3"></b><b class="urb4"></b>
<div class="urboxinhoud">
Hier jou tekst
</div>
<span class="urb4"></span><span class="urb3"></span><span class="urb2"></span><span class="urb1"></span>
</div>

 
eind