Dennis Dennis - 1 year ago 134
CSS Question

Custom borders using HTML/CSS with basic HTML

I am using TCPDF, which has issues with normal HTML/CSS. It accepts a basic set of HTML/CSS and unfortunately nothing really fancy.

I need a way to create custom dashed lines, as below:

enter image description here

Seeing how CSS only has border property of solid, dashed, or dotted, I am lacking the "other way" of dashed lines. I need to be able to control the length of the stroke, and the length of the in-between space. So for example stroke length of 17, and in-between space of 5.

How can I do this? Can I do this?

So far looking at other questions did not help me. I've read a few questions and none of the solutions so far helped. Either it's too fancy (tcpdf ignores it), or it resorts back to dashes and dotted properties and those are not sufficient for my purpose.

Dai Dai
Answer Source

As you're using a library which doesn't implement CSS's more useful features (such as custom dashed borders, image borders or CSS gradients) and because you're writing HTML+CSS solely to generate a a PDF document then I see no problem writing non-semantic HTML using old-school techniques such as <table>-abuse to produce an image border.

I suggest using a 9-grid:

<table border="0" cellspacing="0" cellpadding="0">
        <td><img src="topLeftCorner.gif" alt="" /></td>
        <td background="horizontalDottedBorder.gif">&nbsp;</td>
        <td><img src="topRightCorner.gif" alt="" /></td>
        <td background="verticalDottedBorder.gif">&nbsp;</td>
        <td background="verticalDottedBorder.gif">&nbsp;</td>
        <td><img src="botLeftCorner.gif" alt="" /></td>
        <td background="horizontalDottedBorder.gif">&nbsp;</td>
        <td><img src="botRightCorner.gif" alt="" /></td>

BIG SCARY WARNING: Never use this markup in a HTML document viewed in an actual web-browser.

...with the possible exception of HTML email targeting Office Outlook 2007-2013, which is still awful: and

(disclaimer: I work for Microsoft but not on the Office team and these opinion is my own and not that of the company's and stuff)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download