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

stap 1Ten 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:
het resultaat, klik om de pagina in het echt te zien.
Succes met bouwen!

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

4 reacties

  1. ricardodesigns schreef:

    Handig is dit want ik zag dat vroeger ook altijd ronde hoeken,
    maarja kon eigenlijk nergens vinden hoe dat moest, kon het wel vinden maar niet echt in duidelijke taal.

    Groetjes,
    Ricardo

  2. Sebastiaan Franken schreef:

    -moz-border-radius: 7px;

    is al zo sinds firefox versie 1 om afgeronde hoeken te maken, dus je hebt CSS 3.0 niet nodig 😉

  3. Joren schreef:

    @sebas

    Wel voor IE

  4. Erwin schreef:

    Er word in de html ‘ ipv ” gebruikt.

    En je kan bij zoiets ook 1 afbeelding gebruiken en dan positioneren met background-position.

    Voor de rest goede tutorial.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *