Solved

circular borders

Posted on 2011-09-06
10
303 Views
Last Modified: 2012-05-12
please see related question

want circular borders

like the picture in the related question

this is the 105x105 camera

http://filedb.experts-exchange.com/incoming/2011/09_w37/t495892/canon-550d.gif

and this is the border around the image with rounded edges

http://filedb.experts-exchange.com/incoming/2011/09_w37/t495891/border.jpg
<style>
#product{
	width:140px;
	height:190px;
	border:1px solid #CCC;	
	-moz-border-radius: 10px;
	border-radius: 10px;
	float:left;
	margin-right:20px;
}
#product:hover{
	width:140px;
	height:190px;
	border:1px solid #333;	
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#product .title{
	color:#06C;
	font-weight:bold;
	text-align:center;
	margin:3px;
}
#product img{
	margin:5px 15%;
}
#product .price{
	text-align:center;
	margin-top:10px;
	color:#06C;	
}
</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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36491428
Sounds like you want rounded corners. If your going for CSS only it won't work in any version of IE except for 9.

For that I recommend PIE.htc.

http://css3pie.com/
#product img{
	margin:5px 15%;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
}

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 36491435
Almost forgot. You'll need to specify an actual border too:

#product img{
        margin:5px 15%;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
border:1px solid #999;
}

Open in new window

0
 

Author Comment

by:rgb192
ID: 36492309
I dont understand

want border go around the image and the words


what is the final css
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Expert Comment

by:Eternal_Student
ID: 36494442
LZ1 has given you a solution ... for more information take a look at this:

http://www.the-art-of-web.com/css/border-radius/
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36495144
If you want it to go around the image and words, then just change the selection in your CSS from:
#product img

to:
#product
0
 

Author Comment

by:rgb192
ID: 36514207
I think I did the replace wrong

because there is already a product img


#product {
        margin:5px 15%;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
border:1px solid #999;
}
#product:hover{
  width:140px;
  height:190px;
  border:1px solid #333;  
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#product .title{
  color:#06C;
  font-weight:bold;
  text-align:center;
  margin:3px;
}
#product img{
  margin:5px 15%;
}
#product .price{
  text-align:center;
  margin-top:10px;
  color:#06C;  
}
</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
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36514475
This?  We're not sure what you want it to look like, but here it is with the border around the image and price.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style> 
#product {
        margin:5px 15%;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
}
#product:hover{
  width:140px;
  height:190px;
  border:1px solid #333;  
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#product .title{
  color:#06C;
  font-weight:bold;
  text-align:center;
  margin:3px;
}
#product img{
  margin:5px 15%;
}
#product .price{
  text-align:center;
  margin-top:10px;
  color:#06C;  
}
</style>

</head>

<body>

<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>

</body>
</html>

Open in new window

0
 

Author Comment

by:rgb192
ID: 36514787
this code works on firefox5 but not ie9
0
 

Author Comment

by:rgb192
ID: 36514789
internet explorer has square borders
0
 

Author Closing Comment

by:rgb192
ID: 36515861
this works for non ie browsers
so thank you.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

623 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