Met een paar regels CSS "zet" je deze inline-border-procedure op jouw web-pagina. Plaats de html-code in de body-sectie van jouw pagina en plaats de stylesheet in de head-sectie van de pagina. In de html code geef je de hoogte en breedte van de afbeelding aan en dezelfde getallen vul je in bij (respectievelijk) border-bottom voor wat betreft de hoogte, en border-left voor wat de breedte aangaat. De kleuren van de inline-borders kan je eenvoudig in de stylesheet wijzigen, en je kan zoveel (css) eigenschappen toevoegen of weglaten als je wilt.
<p>
<a href="#" class="inline_border">
<img src="inline-borders.jpg" alt="demo inline borders" width="180" height="180" />
</a>
</p>
<p class="spacer"></p>
<style type="text/css">
img{border:0;}
a.inline_border,a.inline_border img{
float:left;
overflow:hidden}
a.inline_border{
border-left:180px solid #41543A;
border-bottom:180px solid #779978}
a.inline_border img{
margin-left:-180px;
margin-bottom:-180px}
a.inline_border:hover{
border:1px solid #779978}
a.inline_border:hover img{
margin:-1px}
.spacer{clear:both}
</style>