Archived

This topic is now archived and is closed to further replies.

  • 0

Css Outline Property


Question

Posted · Report post

Hi,

I'm trying to add a stitched effect to my boxes using the css outline property. The site is http://brasesco.com/blog/

I've used the following code:


	 outline: 1px dashed #CCC;

	 outline-offset: -5px;

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

Thanks,

J.D.

post-8917-0-03683100-1353915732_thumb.pn

post-8917-0-84353100-1353915734_thumb.pn

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Try something like this:

 

.widget-pad::before

Then use border dash,  that may work.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

 

A more generic option would be

border:5px dashed red;

See:  http://www.w3schools.com/css/css_border.asp

Share this post


Link to post
Share on other sites

Posted · Report post

Ah, nice you already did it!

 

Good job!

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites