Om het (cross browser) "ronde hoeken" gebeuren op jouw website te gebruiken, dien je de stylesheet, die hieronder staat, in de head-sectie van jouw pagina te plaatsen. Op de plaats waar je het effect wilt hebben, voeg je de onderstaande html-code in. Omdat de ronde hoeken met uitsluitend CSS-code zijn gemaakt, kan je werkelijk alles aanpassen aan jouw eigen smaak. Experimenteer met de kleurstelling, borders en marges om een effect naar eigen smaak te maken. Een soortgelijke procedure kan je vinden achter de link van deze text-transition.
<style type="text/css">
.rounded_corner{line-height:80%;text-align:center;font-weight:bold;margin:0;padding:0 1em 0 1em;color:inherit;background:#ff1300;border:solid 1px #ff2800}
.rounded_corner a{background:#FF1300;color:#ffa;text-decoration:none}
.rounded_corner a:hover{background:#f00;color:#fff}
.rounded_corner a:active,.rounded_corner a:focus{background:#f00;color:inherit}
.rond{width:12em;margin:2px 0 0 5em}
.corner_bottom{border-bottom:1px solid #111}
.corner_top{border-top:1px solid #111}
.rond .dh4,.rond .dh3,.rond .dh2,.rond .dh1{font-size:1px;display:block;/* \*/ overflow:hidden;/* */}
.rond .dh4,.rond .dh3,.rond .dh2{height:1px}
.rond .dh3,.rond .dh2,.rond .dh1{color:inherit;background:#f00;border-left:2px solid #111;border-right:2px solid #111}
.rond .dh4{margin:0 4px}
.rond .dh3{margin:0 2px;border-width:0 2px}
.rond .dh2{margin:0 1px}
.rond .dh1{height:2px;margin:0}
.rond .eh4 .corner_top{margin:0 5px;background:#000;color:inherit}
.rond .eh3{margin:0 3px;border-width:0 2px}
.rond .eh2{margin:0 2px}
.rond .eh1{height:2px;margin:0 1px}
.rond .rounded_corner_{z-index:3;display:block;color:inherit;background:transparent;border-left:2px solid #111;border-right:2px solid #111}
.rond:hover{width:12.4em;margin:2px 0 0 4.8em}
</style>
<div class="rond"><em class="dh4 corner_bottom"></em><em class="dh3 eh3"></em><em class="dh2 eh2"></em>
<em class="dh1 eh1"></em>
<div class="rounded_corner_">
<div class="rounded_corner">
<a href="http://kompoos.nl/css/text-effects/rounded-corners-text.html">
rounded corners</a></div>
</div><em class="dh1 eh1"></em><em class="dh2 eh2"></em><em class="dh3 eh3"></em><em class="dh4 corner_top"></em>
</div>
<div class="rond"><em class="dh4 corner_bottom"></em><em class="dh3 eh3"></em>
<em class="dh2 eh2"></em><em class="dh1 eh1"></em><div class="rounded_corner_">
<div class="rounded_corner">
<a href="http://kompoos.nl/css/text-effects/rounded-corners-text.html">
cross browser</a></div>
</div><em class="dh1 eh1"></em><em class="dh2 eh2"></em><em class="dh3 eh3"></em><em class="dh4 corner_top"></em>
</div>
<div class="rond"><em class="dh4 corner_bottom"></em><em class="dh3 eh3"></em><em class="dh2 eh2"></em>
<em class="dh1 eh1"></em><div class="rounded_corner_">
<div class="rounded_corner">
<a href="http://kompoos.nl/css/text-effects/rounded-corners-text.html">
valide css code</a></div>
</div><em class="dh1 eh1"></em><em class="dh2 eh2"></em><em class="dh3 eh3"></em><em class="dh4 corner_top"></em>
</div>