Border and Background in ad preview

[srouse13 1 Likes (Newbie)]

I had a couples questions regarding border and background on html ads. I have a border on the entire body of my ad that has a 3px width and I also do not have a background color set, so it's technically transparent. The right and bottom sides of my border appear to be getting cut off in the preview of Adwords. When I uploaded to another ad server that has a light grey background in their ad preview, my ad background was that light grey instead of white.

 

Is good practice to only set a border of 1px or less? Does anything above 1px border width get cut off when actually set live? Also, are ads typically served over a white background, is the transparent background something I should be concerned about?

 

Thanks for any insight anyone has!

 

 

[leolo69 12 Likes (Newbie)]

Sometimes i use 4 divs like in this example.

 

https://css-tricks.com/body-border/

[mikel 1,823 Likes (Superhero)]

Hi @srouse13,

 

If you use GSAP, then this variant is also suitable.

 

See the Pen zQVQaV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[ohem 324 Likes (Leader)]

Just use box-sizing: border-box; to keep the borders within the boundaries of the main ad container.

 

Regarding your second question, ads can be served with transparent backgrounds, so it's always good to have a background color or image, even if you want the background to be plain white.

 

 

[srouse13 1 Likes (Newbie)]

Thanks for the confirmation on the transparent background, that makes sense and I'll be sure to set a background color going forward. 

 

Also, using border-box makes a ton of sense, can't believe I missed that. I ended up using a div within my body and accounting for my border width when creating the size, which also worked. In the future, I'll just be sure to get my resets like border-box in order before I get going on my ad.

 

Thanks!

[emmanuelulloa 31 Likes (Newbie)]

Make sure that if the border is 1px and using box-sizing: content-box; you are accounting for the extra pixels in the border.

So if the ad is 300x250 then the container/wrapper div will have width: 298px; and height:248px;