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
Related
I need to create a HTML div with custom border. According to what the designer told me, the border has a radius of 3px and stroke of 8px, color f7f7f7 and position outside
What I have so far is:
div#content {
padding : 10px 20px;
border-style : solid;
border-width : 8px;
border-color : #F7F7F7;
-webkit-border-radius : 3px;
-moz-border-radius : 3px;
border-radius : 3px;
}
I really don't know what the stroke effect is and how to do it with css.
Stroke basically means outline or border - this is the professional name of it. your code seems fine. didn't it work?
It works in this jsFiddle. it creates a thick, light grey border with a little bit of rounded corners.
also, you can use shorthand: border: 8px solid #f7f7f7;
i understand 'stroke' as outlined , like usually said for a text effect.
I would go ,since outline isn't friendly with radius:
div {
border:solid; /* no info for size nor color yet */
box-shadow: 0 0 0 8px #f7f7f7;
border-radius:3px; /* prefix not needed anymore */
}
What you are looking for is border: dashed;
If the designer said stroke, chances are they mean dashed.
I've updated Yotam's fiddle
border-style : dashed;
jsfiddle
I need to use CSS triangle to create and arrow. This is the one Im working on: http://jsfiddle.net/7vRca/
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
The issue is that in chrome it looks perfect. But in firefox there is a small bent in the middle.
Any idea why this is happening and how can I make it look smooth as in chrome?
I haven't got a mac to test unfortunately and Firefox on Windows seems to render correctly. You could get around the problem though...
.arrow-outer {
border: 2em solid transparent;
border-right: 0;
border-top-color: #3bb0d7;
height: 0;
width: 0;
}
Instead of rendering the triangle as two sides of the border, it flattens the right border to achieve the same shape using only the top border, circumventing any alignment issues (illustrated below).
It is possible that Firefox on Mac OS is rendering the div as a pixel height which might be solved using an overflow hidden, but it is equally if not more likely that the rounding in the rendering algorithm has resulted in different pixels being selected for the edge of the right border for that combination of browser and OS. That would be my guess as to why it is happening.
Setting 'inset' for the transparent borders helped for me. I found this trick here: http://css-tricks.com/snippets/css/css-triangle/#comment-103785
Try add this into css:
-moz-transform: scale(.9999);
Try using RGB instead of transparent,
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid rgba(255,255,255,0);
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
as we did here: Weird dark border :after css arrow in Firefox
EDIT: by the way, it worsk in both ways in my Firefox (one with the gray line, the others without, but never the effect you described...)
Can someone explain me why the top-left and bottom-left corners are displayed in this way:
using the following CSS:
form .form-field
{
height: 20px;
padding: 5px;
border: 1px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
both input field and the textarea have "form-field" class. (same behavior in Safari, Chrome and Firefox)
Like T.J. noted, something has a red background on it that's higher up in your DOM tree. Adding the border radius to your corners is exposing that. Use your browser's inspector to find it. Should be a quick fix.
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.