Using border-radius and box-shadow in Html -> PDF conversion

Aspose.HTML Product Family
,
1

Hello, I’m trying to get a rectangle with rounded corners and shadow by converting HTML into PDF.
I’m using latest Aspose.HTML v25.05 for this.
A proper HTML does not work when processing through Aspose.Html and saving as PDF document.
Any hints on how to make it work?

Below the code I use and results I get.

var html = @"<style>
    div {
        margin: 20px;
        width: 300px;
        height: 200px;
        background-color: #f1f1f1;
        padding: 20px;
    }

    .parent {
        /* display: flex;
        justify-content: center;
        align-items: center; */
        background-color: transparent;
    }

    .back-div {
        width: 300px;
        height: 200px;
        background-color: #ccc;
        position: absolute;
        z-index: 1;
        padding: 0;
    }

    .top-div {
        width: 280px;
        height: 180px;
        background-color: #ff0;
        position: absolute;
        z-index: 2;
        padding: 10px;
    }

    .rounded {
        border-radius: 20px;
    }

    .shadow {
        background-color: transparent;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
</style>
<div class="rounded shadow">
    Div with Rounded Corners and Shadow
</div>

<div class="rounded">
    Div with Rounded Corners without shadow
</div>

<div class="shadow">
    Div with Shadow
</div>

<div class="parent">
    <div class="back-div shadow"></div>
    <div class="top-div rounded">
        Div-on-div - Top Div with Rounded Corners
    </div>

</div>";
Aspose.Html.Converters.Converter.ConvertHTML(html, "../", new Aspose.Html.Saving.PdfSaveOptions(), "output.pdf");

comparison.png (84.2 KB)
output.pdf (14.9 KB)
ctrtemplate.zip (550 Bytes)

2

@mlamla

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): HTMLNET-6394

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

3

Hey, thanks for the answer.
We are assessing the Aspose.HTML at the moment, and if it does not fulfil our needs, we won’t buy it.

I created following workaround for this particular case, but was hoping for this feature to be supported with simplest approach possible - having border-radius and box-shadow on the same element.

Here is the workaround - layering 2 divs, smaller with box-shadow as background, larger with border-radius on top. It requires calculating/defining top and left to align the elements correctly.
Just in case anyone else needs it in future.

<style>
    div {
        margin: 20px;
        width: 300px;
        height: 200px;
        background-color: #f1f1f1;
        padding: 20px;
    }

    .parent {
        background-color: transparent;
        position: relative;
    }

    .back-div {
        width: 292px;
        height: 201px;
        position: absolute;
        z-index: 1;
    }

    .top-div {
        width: 305px;
        height: 215px;
        background-color: #fff;
        position: absolute;
        z-index: 2;
        top: 12px;
        left: 13px;
    }

    .rounded {
        border-radius: 20px;
    }

    .shadow {
        background-color: transparent;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="parent">
    <div class="back-div shadow"></div>
    <div class="top-div rounded">
        Div-on-div - Top Div with Rounded Corners
    </div>

</div>
4

@mlamla

Thanks for sharing more information. We have updated the ticket information accordingly and have recorded your concerns as well. As soon as we make some progress towards ticket resolution, we will inform you. Please be patient and spare us some time.

We are sorry for the inconvenience.

5

Hey,
here is even better workaround - rounded rect with shadow with width and height controlled by parent’s container dimensions.

<style>
    .parent {
        position: relative;
        vertical-align: top;
    }

    .card {
        background-color: #f1f1f1;
        padding: 20px;
    }

    .card-shadow {
        position: absolute;
        z-index: 1;
        background-color: transparent;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
        top: 11px;
        bottom: 11px;
        left: 11px;
        right: 11px;
        inset: 11px; /* covers the top/bottom/left/right setting at once - only by new browsers*/
    }

    .top-div {
        background-color: #fff;
        position: absolute;
        z-index: 2;
        box-sizing: border-box;
        border-radius: 20px;
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: 5px;
        inset: 5px; /* covers the top/bottom/left/right setting at once - only by new browsers*/
    }
</style>
<div class="parent" style="width:259px; height: 172px;">
    <div class="card card-shadow"></div>
    <div class="card top-div">
        Div-on-div - Top Div with Rounded Corners
    </div>
</div>
6

@mlamla

Thanks for sharing this. We have again put it along with the previous details in the ticket and we will include this piece of information in our investigation as well.