[(x)html/ccs]Afgeronde hoeken maken.

[Onbekend]

Ik zoek (net zoals vele anderen) een manier om afgeronde hoeken te maken voor een website.

Uiteindelijk heb ik de volgende manieren gevonden:

* Als een gif/png opslaan en dan als een soort tabel of div weer te geven,
* Een rondje (van een lijst) precies in de hoekpunten zetten zodat ze afgerond lijken te zijn.
* M.b.v. <area> een rondje maken.
* Het border-radius uit css3 te gebruiken. (Maar dat werkt dan niet met IE)

Op de laatste na werken in principe alle opties.

Optie 1 is lastig aangezien ik van de verschillende divs ook verschillende kleuren randen heb.
Ook als ik de breedte van de randen wijzig, zou ik elk plaatje moeten aanpassen.
Optie 2 is ook lastig om alles op de pixel nauwkeurig te plaatsen en volgens mij ook niet netjes.
Optie 3 is ook lastig als de grootte van de div aanpast wordt. De rest moet namelijk ook mee veranderen. Dat zou evt. kunnen met JavaScript, maar voor de mensen die JavaScript uit hebben staan is dat geen oplossing.
Optie 4 werkt nog niet voor de browsers waarvoor ik de site bouw ( IE6, IE7, FF en FF2)

Wat raden jullie mij aan om te gebruiken. Of is er nog een optie om een afgeronde rand te maken?

[NMe]

En je vraag werd niet beantwoord als je even zoekt?

[Onbekend]

Natuurlijk heb ik op GoT en Google gezocht. Toen kwam ik erachter dat je met <area> en in css3 ook ronde hoeken kan maken.

Maar ik weet niet wat voor mij een goede keuze is.

(Kunnen jullie trouwens niet zien welke zoekacties een gebruiker heeft uitgevoerd?)

[NMe]

Nee, het is aan de gebruiker om ons dat soort dingen duidelijk te maken.

Serveradmins kunnen dat wel zien, maar die hebben wel wat beters te doen.

[glashio]

Nifty Corners werkt erg goed!

[OkkE]

Dit is misschien ook wel iets om naar te kijken: Transparent Custom Corners and Borders.
Zelf nog niet getest, maar toen ik het las leek het me wel een mooie oplossing.

[Verwijderd]

Als je wilt dat de boxjes ook moeten kunnen resizen heb ik nog een grappig voorbeeldje:
http://test.jaydev.nl/dozen/box.html

Zeer simpel.

Het gebruikt 2 plaatjes.

De daadwerkelijke code:

code:

<style type="text/css">
           .container {
              float: left;
              background: url(rounded-right.gif) top right no-repeat;
             }
           .desc {
              margin: 0;
              padding: 9px 9px 0 9px;
              background: url(rounded-left.gif) top left no-repeat;
             }
           .link {
              margin: 0;
              padding: 0 0 0 9px;
              background: url(rounded-left.gif) bottom left no-repeat;
             }
           .link em {
              display: block;
              padding: 0 9px 9px 0;
              background: url(rounded-right.gif) bottom right no-repeat;
             }
</style>
    <div class="container">
        <p class="desc">
                Deze box is
        </p>
        <p class="link">
                <em><a href="http://">bulletproof</a></em>
        </p>
        </div>

Je hebt dus 4 elementen nodig.

Werkt in IE7, 6, 5.5, 5.01, opera, firefox

[ Voor 20% gewijzigd door Verwijderd op 02-02-2007 11:45 ]