Right this was just a basic test, I know if this works then i can apply backgrounds and curved corners etc

so here is my code,

 
img { border-left: 1px solid #DDDDD3; border-right: 1px solid #DDDDD3; width: 60px; margin: 5px auto; }
img:before { border-top: 1px solid #DDDDD3; height: 1px; width: 60px; content: ' '; font-size: 1px; }
img:after { border-bottom: 1px solid #DDDDD3; height: 1px; width: 60px; content: ' '; font-size: 1px; }

content: ' '; is to make the sections appear, without anything as content they won't appear even if you put a height on it.

 

The thing is this works with any element like <h1> or <pre> etc, but this won't work with anything like <img> or <input>, so i'm assuming for elements like <img> and <input> it won't work or am I missing something?

 

Please help me , thankyou.

<img> and <input> are inline elements and as such they do not break the flow of the page. Block elements like <div> and <h1> will span the full width available to them. <img> (inline element) cannot be given a margin because margins can only be given to block elements.

 

Try wrapping inline elements in a block element like a <div> or giving inline elements a property of {display:block;}

<img> and <input> are inline elements and as such they do not break the flow of the page. Block elements like <div> and <h1> will span the full width available to them. <img> (inline element) cannot be given a margin because margins can only be given to block elements.

 

Try wrapping inline elements in a block element like a <div> or giving inline elements a property of {display:block;}

 

Thanks for the quick reply, the {display:block;} idea failed i'm afraid, it looks like wrapping it inside a <div> tag will have to be the option, I was trying to avoid it, but oh well , Thankyou.

No probs. I forgot to mention that MS browsers < IE8 do not properly interpret before and after pseudo classes.