I am beginner coder in web design so I have a fairly amateur question to ask. I have created a box of text but I don't know how to make the edges round rather than rectangular. I know that CSS functions on rectangular borders. If possible, I would also like to add a slight shadow beneath the box, I'm not sure how to implement this also. Here is my code specifically for the box section:
#wrapper{
border: solid 1px #eeeeee;
}
"#wrapper" refers to a piece of php code in another document. Thank you.
Using border-radius and box-shadow.
#wrapper {
border: solid 1px #eee;
border-radius:10px; /* round corners */
box-shadow:0px 3px 5px 5px #000; /* add shadow */
}
Here are the parameters for each...
border-radius:(radius of border corners)
box-shadow:(horizontal offset) (vertical offset) (blur) (spread) (color)
You may wish to prefix your CSS3 properties with -webkit and -moz to increase compatibility with older browsers.
#wrapper {
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 12px; /* FF1-3.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
check this out!
For browsers which do not support border-radius, you can use roundies.js.
Related
can anyone help me change the shape of my bgcolor more like a rounded not a rectangular shape...I'm just not that expert in css can anyone help me please.
Have you tried with
table { border-collapse: separate; }
td{
border-radius : 4px;
}
You're looking for a CSS property called border-radius
A very thorough walkthrough can be found at http://css-tricks.com/almanac/properties/b/border-radius/
Example:
table td {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 4px;
/* Firefox 1-3.6 */
-moz-border-radius: 4px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 4px;
}
Add these to the div that you want rounded for full cross browser compatibility. Obviously you can change the values. The higher the value the more bend in the curve.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
I added 1 pixel border to the image. At the same time I am trying to give radius to the image edges.
My problem is since the image is already rounded with photoshop, the border of edges look thinner than it should be
You can check it from here.
http://jsfiddle.net/fVNgA/
How can I make the border even?
img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }
<img src='http://carantina.com/wp/wp-content/themes/new/images/home_pic1.jpg'>
Wrap image into a span and add css to it
http://jsfiddle.net/96wVp/
Add "padding: 1px;" to the image styles :)
By the way, here is another thread outlining a similar issue, and the reasons for is: CSS 3 border-radius property; corners too pale in Chrome?
The problem isn't so much the border as how it's applied and the image you're using. Try rounding the corners in Photoshop with a 6px radius and save it as a png with a transparent background. What's happening is you're placing a border then the border is actually moving under the corner of the image. Since your image is a jpg and jpg's don't support transparency your rounded corners actually have square white corners. Here is an example of your image with a transparent image rather than a jpg.
http://jsfiddle.net/calder12/fVNgA/6/
Code just because they won't let me post a fiddle without code... sometimes it makes sense >.>
<style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; } </style>
<img src='http://calderonline.com/images/home_pic1.png'>
Chrome uses square corners for the inner borders. So in Chrome, you won't be able to get the exact feel, where as in Firefox, it uses rounded corners even for the inner borders.
Screenshot in Chrome and Firefox
My advice is it is better to include the generic border-radius and also, for Chrome, a fix would be adding overflow: hidden; and padding: 1px;.
CSS
img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; /* Add this for fallback */
overflow: hidden; /* Hack for Chrome */
padding: 1px; /* Hack for Chrome */
border: 1px solid #000;
}
After Chrome Hack
as u can see the border is missing from the corners (red one). if i make it 4+ px thick then its ok but i need it 1px thin. why it is a problem? ist this property behaves by design like this?
the html
<div class="win" >
<img class="rounded" src='red.jpg' />
</div>
and the css
.win{width:188px;float:left;margin:0 30px 25px 0;}
.win .rounded {
overflow: hidden;
behavior: url(PIE.htc);
border:1px solid #000;
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari and Chrome */
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}
/EDIT/
finally i have found a solution which makes exactly what i needed. i share the link maybe someone else has the the same problem:
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
You should have a look at the background-clip css property. Try background-clip: padding-box. You should also add -webkit-background-clip and -moz-background-clip to support older browsers.
There is an issue using border-radius with images in most/all browsers. There are a number of online articles about this but I've not paid attention to them. You should Google for those.
If you want good rounded borders that will work with a large number of browsers, you could use image as a background for a div with needed css-properties.
Example (only border, nothing else):
html
<div class="card" style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div>
css
.card {
border:1px solid #000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.
.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;
}
If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with:
Graphics Page
What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.
I think it's because it is in the foreground above the border
try using the same code you have above, but in your html:
<div class="nonTyp" style="background-image:url('image.jpg');"></div>
This probably has to do with the order in which the border vs. radius clip is applied, but is very strange. A solution is to move the border-radius and related definitions to the enclosing tag. Remember to declare display:block so it's treated as block level on all browsers.
This worked for me in Chrome and Safari.
Image is top level.
div.someclass with radius 5px and div.someclass img with radius 4px.
That seems to make the corners look cleaner in Chrome and Safari.
.someclass {
...
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
.someclass img {
...
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I think drawing functions that Chrome uses for image and link are works differently between each other. And that causes a blank space between image and the link.
I partially fixed this bug via modifying Matjis' jsfiddle code a little bit. I moved img tags position to left.
.gallery a img {
...
position:relative;
left: 2px;
}
This solution may work if you set different radius values for image and the link.
If so, which PNG IE fix would you recommend?
If you do not necessarily need your CSS to validate, you might use this:
.box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* FF 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Webkit = Safari + Chrome */
-khtml-box-shadow: 2px 2px 3px #969696; /* Konqueror */
box-shadow: 2px 2px 3px #969696; /* Opera */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* IE */
}
It uses the box-shadow CSS3 property where appropriate and for MSIE it uses filters. If you can trust your users have updated browser or use IE, you should be safe.
The code is not entirely from my head, I used http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ for reference.
If your drop shadow is partially transparent and can't use a .gif then yes that is really the only way to go. Firstly, I must say the obligatory %^&* IE 6. Second, I have had great luck with http://jquery.andreaseberhard.de/pngFix/ but I loves me some jquery so take this as just personal opinion and if you arn't already using jquery may not be the best for you.