Improve company productivity with a Business Account.Sign Up

x
?
Solved

curved borders

Posted on 2011-09-29
4
Medium Priority
?
444 Views
Last Modified: 2012-05-12
add
border-radius.htc

to make curved borders work with ie8, ie7

 border.jpg inner picture
<style>
#product {
    border: 1px solid #CCCCCC;
    border-radius: 10px 10px 10px 10px;
    float: left;
    height: 190px;
    margin-right: 20px;
    width: 140px;
}
#product:hover {
    border-color: #333333;
}
#product .title {
    color: #7D8587;
    font-family: Verdana;
    font-size: 11px;
    padding: 9px;
    text-align: left;
}
#product img {
    height: 105px;
    margin: 0 15%;
    width: 105px;
}
#product .price {
    color: #4AA4BF;
    font-family: Verdana;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
}
</style>


<div id="product">
<div class="title">Camera</div>
<img src="images/canon-550d.gif" alt="Camera" />
<div class="price">$300</div>
</div>
<div id="product">
<div class="title">Camera</div>
<img src="images/canon-550d.gif" alt="Camera" />
<div class="price">$300</div>
</div>
<div id="product">
<div class="title">Camera</div>
<img src="images/canon-550d.gif" alt="Camera" />
<div class="price">$300</div>
</div>

Open in new window

0
Comment
Question by:rgb192
4 Comments
 
LVL 22

Accepted Solution

by:
Tapan Pattanaik earned 668 total points
ID: 36871077
0
 
LVL 13

Assisted Solution

by:Andrew Derse
Andrew Derse earned 668 total points
ID: 36891632
In IE7 and IE8, you would need to create images or something similar to that.  IE9 handles rounded borders, but anything prior to that in IE doesn't work...

The links provided above should help you on your way, but I just create simple images and use those as background images for that purpose...just in ie7, and ie8 though...
0
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 664 total points
ID: 36891734
Check out this link as well, http://jquery.malsup.com/corner/
0
 
LVL 1

Author Closing Comment

by:rgb192
ID: 36894947
thanks
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question