Border model

This section show a simple content DIV element with different border sizes and paddings.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div class="outer">
            <h1>No border</h1>
            <div class="container" id="no-border">
                Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
                turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in
                dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis,
                turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt
                ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar
                eros egestas eros placerat habitasse.
            </div>
        </div>

        <div class="outer">
            <h1>Small border</h1>
            <div class="container" id="small-border">
                Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
                turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in
                dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis,
                turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt
                ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar
                eros egestas eros placerat habitasse.
            </div>
        </div>

        <div class="outer">
            <h1>Large border</h1>
            <div class="container" id="large-border">
                Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
                turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in
                dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis,
                turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt
                ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar
                eros egestas eros placerat habitasse.
            </div>
       </div>
    </body>
</html>

Stylesheet

@import url("../styles/a4.css");


* {
    margin: 0;
    padding: 0;
}

.outer {
    margin-bottom: 3em;
    outline: 1px solid #555;
    hyphens: auto;
    text-align: justify;
    background:  #eee;
    break-after: page;
}

.container {
    margin-bottom: 1em;
    width: 50%;
    background: #ddd;
    outline: 1px dashed green;
}


#small-border {
    border: 5px solid blue;
    padding: 20px;
    margin: 20px;
}

#large-border {
    padding: 30px;
    border: 20px solid pink;
    margin: 50px;
}