CSS rounded border corners

door: JorisO
April 7 2007

Cross browser compatibele div met rounded border - hoeken, zuiver d.m.v. CSS code, en maar 1 plaatje, te weten circle.gif dat links hiernaast zweeft (achtergrond-gradient in onderstaand CSS voorbeeld niet meegeteld). CSS rounded borders werkt zowel voor fixed als fluid breedtebepalingen.

Fixed 350px Div with rounded borders

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.

FLUID 100% div with rounded borders

CSS en HTML code voor CSS rounded borders:

<html>
    <head>
<style type="text/css">

.fixedroundblack {
border:1px solid white;
width: 350px;
background: #000000 url(grad.gif) repeat-x;
color: #fff;
}
.fluidroundblack {
border:1px solid white;
width: 100%;
background: #000000 url(grad.gif) repeat-x;
color: #fff;
}

.fixedroundblack p , .fluidroundblack p{
margin: 6px ;
padding: 6px;
}

.topfiller, .bottomfiller, .roundtop, .roundtopright,.roundbottom, .roundbottomright {
height:6px;
font-size:1px;
line-height:1px;
}

.bottomfiller, .topfiller {
width: 100%;
clear:both;
position:relative;
}

.roundtop {
background: url(circle.gif) no-repeat top left;
width:6px;
float:left;
position:relative;
top:-1px;
left:-1px;
}

.roundtopright {
background: url(circle.gif) no-repeat top right;
float:right;
width:6px;
position:relative;
top:-1px;
left:1px;
}

.roundbottom {
background: url(circle.gif) no-repeat top left;
background-position: 0 -6px ;
width:6px;
float:left;
position:relative;
top:1px;
left:-1px;
}

.roundbottomright {
background: url(circle.gif) no-repeat top right;
background-position: -6px -6px ;
width:6px;
float:right;
position:relative;
top:1px;
left:1px;
}
</style>
</head>
<body style="background:black">
<div class="fixedroundblack">

         <div class="roundtop"> </div>
        <div class="roundtopright"> </div>

<p><b>Fixed 350px Div with rounded borders</b></p><p>
        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.</p>
    <div class="bottomfiller">
        <div class="roundbottom">  </div>
        <div class="roundbottomright"> </div> 
    </div>
</div><br clear="all">
<div class="fluidroundblack">

<div class="roundtop"> </div>
    <div class="roundtopright"> </div>

<p><b>FLUID 100% div with rounded borders</b></p><p>
        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.</p>
<div class="bottomfiller">
<div class="roundbottom">  </div>
<div class="roundbottomright"> </div>
 </div>
</div>
</html>

Naam:
Link:^{(niet verplicht)}
Commentaar:
^{<-- code:}