ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • HubPages Tutorials and Community

Awesome borders on lens intro modules

Updated on July 28, 2014

How to get an awesome border like this on your intro module

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.

You have to think outside the box

The "Intro Module Image inside the border" trick

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.

Have you got borders on your lens modules?

Are you using CSS borders on your lenses?

See results

Recommended reading

CSS3: The Missing Manual
CSS3: The Missing Manual

Discover how to style the web with CSS3.

 
The Book of CSS3: A Developer's Guide to the Future of Web Design
The Book of CSS3: A Developer's Guide to the Future of Web Design

For intermediate level web designers. This book has many sample codes.

 

Help now my title is too close!

Don't panic!

There is another neat trick to solve this.

Putting some space between the Intro Title and Module

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:

Where are the awesome borders?

I've shown you the basic tricks to get your Intro Module Image inside the border. Remember to use the negative margin CSS style to wrap your Intro Module content and be creative. Below are some great lenses with border ideas and more HTML tips.

Share your Intro Module lens tips

    0 of 8192 characters used
    Post Comment

    • profile image

      jgelien 4 years ago

      This worked with most of my lenses but I cannot for the life of me get the border to wrap all the way around one of my intro lenses. It has a gap in the border on the bottom of the intro photo. How can I fix this?

    • profile image

      anonymous 5 years ago

      Thanks for the negative margin tip. It's already helped me solve some other spacing problems I was having. It's great to experiment with it.

    • Millionairemomma profile image

      Millionairemomma 5 years ago

      Great.

    • profile image

      anonymous 5 years ago

      Thank you very much, I had to double check that I was doing this right because in edit you can't see the change. Be sure to save and preview. Thanks again I have been searching for this too. :)

    • bossy gal profile image

      bossy gal 6 years ago

      This is what i was looking for. Thank you for sharing this information.

    • profile image

      alyssa87 6 years ago

      thank you so much for providing us this info.

    • profile image

      tealmermaid 6 years ago

      Thanks for the tips!

    • profile image

      anonymous 6 years ago

      Thanks for the advice, I will try this. God Bless.

    • profile image

      poutine 6 years ago

      Thanks so much for this tip.

      I just tried it and it worked, to my delight!

      http://www.squidoo.com/greatmenoftoday

    • profile image

      anonymous 6 years ago

      I needed this. Thanks for sharing.

    • profile image

      anonymous 6 years ago

      Thanks for the tips. Thanks for the inspiration to not make super long lenses.

    • tazron profile image

      tazron 6 years ago

      Thank you for solveing a problem that has been killing me. Don't know if I will ever figure out html or css

    • richDik profile image

      richDik 6 years ago

      Brilliant!! Short.. sweet & to the point :)

    • KarenHC profile image

      Karen 6 years ago from U.S.

      Nice tip :-) I'm bookmarking it to refer back to.

      (And I like your attitude that short lenses are best !)