5 replies to this topic

[brasesco]

Hi,

I'm trying to add a stitched effect to my boxes using the css outline property. The site is

Please Login or Register to see this Hidden Content

I've used the following code:

Please Login or Register to see this Hidden Content

It works perfectly in Chrome and Safari, but the offset is not working in Firefox or IE. Any ideas?

Thanks,
J.D.

Attached Files

•  help_112512_01.png   216.71K  11 downloads
•  help_112512_02.png   207.15K  12 downloads

[Danny]

Hi,

As far as I am aware the Outline property is added around elements, outside of borders and on top of content. You're attempting to use to inside the border, by using the offset, it wasn't really supposed to be used like this, in my opinion.

If you want this type of design, I would recommend you use an image for your border.

[brasesco]

Thanks Danny but I don't really want to use images.  Does anyone know if it could be done as a second border with CSS pseudo-elements somehow?

 

Thanks,

J.D.

[Rob]

You're using Outline, and as Danny points out, that has some specific uses.

 

A more generic option would be

Please Login or Register to see this Hidden Content

See: 

Please Login or Register to see this Hidden Content

[Danny]

Try something like this:

 

.widget-pad::before

Then use border dash,  that may work.

[Danny]

Ah, nice you already did it!

 

Good job!