Awesome borders on lens intro modules

I like lenses where lensmasters have added their personality, creativity and style with sharp (or curvy) looking borders, backgrounds and other HTML tricks.

What annoys me is when their Intro Module's picture overlaps part of their lovely border with an ugly unprofessional look.

Here is how to fix that problem and have an Intro Module that looks like this one with a border around the module AND picture.

No more borders hiding behind images. Make a good first impression with these CSS tricks on the Intro Modules of your lenses.

Think outside the box

The trick to getting your Intro Module image inside the border instead of overlapping it is to literally think outside the box.

The CSS trick is to make the box bigger with negative margins.

When the box is bigger the border goes around the image instead of behind.

The CSS to use is to wrap your Intro Module text with this styled paragraph tag:

and close it with:

This is the CSS style used on this Text Module. The Intro Module above uses some extra CSS3 styles for the rounded border effect.

After applying the negative margin trick above, the Intro Title might be too close to your Intro Module with the beautiful border.

The trick to fix this is to add some whitespace in the Intro Title.

And we use this CSS to wrap the Intro Title and give it more space:

and close the Intro Title with: