Hope that helps!

Sorry, i’m confused! I really like your designs and am trying to use your ridge code and implement it into my css but no matter where I put it, it doesn’t register the .ridge

Any thoughts? Where on the css code should I put it? Thanks in advance!

c

This post was mentioned on Twitter by tweetlicius: Unique CSS Borders – Boring borders step aside – The Web Squeeze – http://bit.ly/6naX5P...

Of course if wanting to keep that style across all browsers some double div workaround will be needed, however there is the argument for letting different browsers behave as they would rather than try and force the issue.

Thank you so much!

Just a heads up that I never received the email asking me to confirm before I could be “finalized” for the forums. I signed up hours ago so I thought I’d let you know.

Thank you again for the code!

Have a terrific evening and weekend!
Diane

To apply the plain border to your picture is pretty easy.
The html code looks like this:
<img src=”thumbnail1.jpg” alt=”My Picture” width=”160″ height=”160″ class=”plain” />

The css has only one minor change and that is to the width.
.plain {
border: 1px solid #4C3C1B;
padding: 5px;
width: 160px;
background-color: #EFEECB;
}

For the second part of your question, the html will look like this:
<img src=”thumbnail1.jpg” alt=”My Picture” width=”160″ height=”160″ class=”ridge” />
The only part that changed is the class.

There isn’t any change to the css. It remains exactly the same. If you want to you can add a width to that css as well but it isn’t necessary in either example because we have given the image a width and a height of 160.

But if you wanted to make sure you had all the i’s dotted and t’s crossed you could state the width and the ridge class would look like:
.ridge {
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #E1A60A;
border-bottom-color: #E1A60A;
padding: 8px 0px;
width: 160px;
}
Hope that helped!

Thank you for your time in putting together the above information.

I do have a question, if you take questions and give answers…

Say I’ve got an image of 160×160 and I want to use the first frame. The image is titled thumbnail1.jpg.

How would I make the first frame with your CSS code:

plain {
border: 1px solid #4C3C1B;
padding: 5px;
width: 300px;
background-color: #EFEECB;.}

work with that image?

or work with the “Above and Below” with your CSS code:

.ridge {
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #E1A60A;
border-bottom-color: #E1A60A;
padding: 8px 0px;
}

I put the spaces in above like your example shows but the spaces aren’t showing in the preview, every line in both sets of code is lined up vertically to the left.

Thank you so much for your help! But, should I be posting this in the forums instead?

I’m going to sign up for your newsletter next.

Thank you again Linda for your time and for sharing your expertise!
Diane Dennis

@ Derek, I tested the rounded corners in IE7 and it works for me. Try it again and see!
Thanks for the nice comments everyone!