Divs met ronde hoeken maken

Het is in veel browsers nog niet mogelijk om divs te voorzien van ronde hoeken. Met CSS 3.0 is dit in de toekomst wel mogelijk. Overigens wordt CSS 3.0 al wel ondersteund door Firefox en Safari. Maar de browser met het grootste marktaandeel, Internet Explorer, ligt nog mijlenver achter met het ondersteunen van de nieuwste CSS versie. Vandaar dat je, als je ronde hoeken wilt creëren, je toevlucht zult moeten nemen tot extra markup. Er zijn manieren om dit alleen met code te doen, maar de makkelijkste manier werkt met plaatjes. We laten in dit artikel een methode zien om ronde hoeken te maken.

Kleur en hoeken

De methode waar we voor kiezen maakt gebruik van een plaatje voor de vier hoeken. Daarnaast moet er een kleur worden gekozen van de div zelf en van de achtergrondkleur. Het beste kun je webveilige kleuren kiezen. Je weet dan zeker dat de kleur van de vier hoeken overeen komt met de kleur van de div zelf. Je kunt de hoeken zelf tekenen in een tekenprogramma, handiger is om een bezoekje te brengen aan ‘cornershop’. Deze website maakt direct de ronde hoeken in de door jouw gewenste kleur en met de gewenste radius. Wanneer je hoeken gemaakt zijn dan krijg je direct aanvullende informatie voor je html-code en je css-code. In een keer heb je alles wat je nodig hebt. We lopen een en ander stap voor stap even door.

Gegevens invoeren

Ten eerste bepalen we de achtergrondkleur, deze wordt geel (kleurcode: #CCFF00). De div zelf krijgt als kleur blauw (#0000FF). Voor dit voorbeeld hebben we natuurlijk twee felle kleuren gebruikt. Deze gegevens worden ingevoerd in de cornershop. Cornerradius laten we nu staan op 10. Wanneer we nu de uitvoer krijgen zijn er vier plaatjes te zien met de vier hoeken. Deze moet je opslaan op je computer. Houd de namen aan zoals z gegeven worden, dus nw.gif, sw.gif, se.gif en ne.gif. Onder de plaatjes zie je direct ook de css code en de html code staan. Hieronder geven we dit voor het gemak ook nog eens weer.

.box {
  background: #0000FF;
}
.boxtop {
  background: url(ne.gif) no-repeat top right;
}
.boxtop div {
  font-size: 0;
  height: 10px;
  background: url(nw.gif) no-repeat top left;
}
.boxbottom {
  background: url(se.gif) no-repeat bottom right;
}
.boxbottom div {
  font-size: 0;
  height: 10px;
  background: url(sw.gif) no-repeat bottom left;
}
.boxcontent {
  padding: 0px 10px 0px 10px;
}

<div class='box'>
 <div class='boxtop'><div></div></div>
  <div class='boxcontent'>
   <!-- Hier plaats je de inhoud van de div -->
  </div>
 <div class='boxbottom'><div></div></div>
</div>

De code activeren

Nu is het zaak om je code te gaan activeren. Dat doe je door html-code in je webpagina te plaatsen met de juiste inhoud in de div. De css code plaats je in je stijlblad. De vier plaatjes zet je in dezelfde map als de html-code, je zorgt dat alles wordt geuploaded en dan bekijk je het resultaat. Dat zou er ongeveer zo uit moeten zien:

Succes met bouwen!