1

I'd like to add a border with rounded corners to images in my publication.

enter image description here

That's simple enough using Antennahouse: 

<fo:block border="1pt solid black" axf:border-radius="4mm">

But when I place an image inside this block, the image extends to the corners of the rectangle, i.e. the image is visible in the area outside the rounded corners (the black areas in the image above).

Is it possible to hide the image area outside the rounded corners?

I've tried stacking 2 images using z-index: z-index=1 for an image that contains the borders and a transparent center, z-index=0 for the photo. That sort of works, but because I have images of variable sizes I have to resize the border image and I end up with different border thicknesses and radii.

Hobbes
  • 1,964
  • 3
  • 18
  • 35

2 Answers2

1

I ran into a similar problem with HTML/CSS, which I solved by changing the visibility and background-clip properties of the element with the rounded corners. See Should border-radius clip the content? for clues.

kbro
  • 4,754
  • 7
  • 29
  • 40
  • Thanks. FO doesn't have a background-clip property though, and setting overflow="hidden" doesn't help. – Hobbes May 24 '17 at 15:11
1

The best that I've been able to come up with so far:

<fo:block-container margin="6pt" border="1pt solid black" axf:border-radius="4pt">
    <fo:block-container margin-left="-1pt" margin-top="-3pt" margin-bottom="-5pt">
        <fo:block margin-left="0">
            <fo:external-graphic src="logo.png" border="2pt solid white" axf:border-radius="5pt"/>
        </fo:block>
    </fo:block-container>
</fo:block-container>
Tony Graham
  • 7,306
  • 13
  • 20