I'm having trouble trying to get a radius on images. I've simplified my problem and exaggerated the variables for demonstration purposes.
CSS:
div.wrap img {
-moz-border-radius: 50px;
border-radius: 50px;
}
img.pic {
padding: 15px 25px 35px 45px;
}
HTML:
<div class="wrap">
<img class="pic" src="http://i.imgur.com/UAef0.jpg"
width="300" height="300" />
</div>
If I remove the padding, poof, pretty corners.
If it helps, there's a reason why they're in two different classes. "wrap" can have more than one "pic" in it. Sometimes they'll be of the same class, other times they wont, sort like this:
img.left_pic { float:left; padding:5px 10px 5px 5px; }
img.right_pic { float:right; padding:5px 5px 5px 10px; }
Any help or insight would be appreciated.
jsFiddle: http://jsfiddle.net/NwfW6/
Edited for a solution:
This was more or less what I basically was trying to do. I think I was having a 'duh' moment. I'm sure now the declaration I needed to used was margin not padding. Another Thanx to GGJ for reminding me how to go about it the right way. And what Jan said about adding padding to an 'img' tag making no sense, It doesn't. My bad.
Your border radius will be outside of the padding, try setting margins instead which will space outside of the border.
Set the padding on "wrap" not on the image (setting paddings on images does not make much sense :)), that should fix your problem.
This is a byproduct of applying both padding and a border-radius to the same element in some browsers (mostly IE and safari). The border-radius changes the curvature of the border component of the box model, which surrounds the padding component.
In addition to the other answers, another interesting thing that seems to fix the issue is adding a border line. If you don't want to see the border, you could use border: 1px solid transparent, like this:
.invisible-border {
border: 1px solid transparent;
}
Demo in jsFiddle
Had the same problem with a span instead of an img. Not exactly the same scenario since both tags have different display values (see this SO thread).
In my case, setting display:inline-block to the span fixed everything.
Late but somehow found the solution for it. you cannot make a circle using it but you can make use of it by making a slight radius below is an example of my solution.
I need 10px padding and 5px radius for my image, added together border-radius:15px worked fine for me
I Hope the explanation was a bit better.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to remove this border inside image with css anyone can help me to solve this.
the image border is object.
example given below:
Thanks..!
you can use clip-path on modern browsers so you wouldn't need to add a wrapper and set the size of the image
Example: http://codepen.io/anon/pen/Gpoamy
img {
-webkit-clip-path: inset(1px 1px 1px 1px);
clip-path: inset(1px 1px 1px 1px)
}
On older browsers (and IE) you could just use clip (although this requires to specify the size of the rectangle and an absolute position)
Otherwise another approach, with a wider support across browsers, might uses an outline (with the same colour of the background) and a negative outline-offset — actually you're overlapping the black border with another one. (tested both on Chrome and Firefox).
Example: http://codepen.io/anon/pen/PPZvKe
img {
outline: 1px #fff solid;
outline-offset: -1px;
}
Of course these examples work when the border width included inside the image is exactly 1px. If your image has a thicker border then change all the values according to the thickness
Although I recommend using an image editor to remove the borders, there is a CSS hack for this:
Negative margins:
Wrap the image inside a container and set overflow: hidden after
defining the dimensions(width and height). Make sure the dimensions are slightly less than the image dimensions.
Set negative margins for the image inside. The margin value is relative to the size of the border.
.borderless-img {
width: 118px;
height: 58px;
overflow: hidden;
}
.borderless-img img {
margin: -1px 0 0 -1px;
}
<div class="borderless-img">
<img src="http://i.stack.imgur.com/dcnpS.jpg" />
</div>
Scaling image:
This method will increase the size of the image, might distort it to a very little extent. It works well for your solution since it would remove the small border.
Cons: Not recommended to hide big part of images.
.borderless-img {
width: 118px;
height: 58px;
overflow: hidden;
}
.borderless-img img {
transform: scale(1.055);
}
<div class="borderless-img">
<img src="http://i.stack.imgur.com/dcnpS.jpg" />
</div>
I've tried and tried so hard to overcome this problem the past few days as I just want to get this site launched above all now. I have been developing this for the last week or so and I have been using my specific preferred browser, Google Chrome. Yes, big mistake!
Anyway, here is the demo site which shows what I want near everything to look like (apologies for some things that are out of place, haven't quite finished yet!): http://www.weburton.co.uk/content/demo/
You see the social area? It displays properly in Chrome; exactly as I want it. In IE it displays the div areas, but there are some styling issues such as the text on the Twitter side.
However, the div areas are completely ignored in other browsers it seems; its a strange problem, I'll admit that. I have them encased in a div which has a background image (selenasocial) and then have the other divs floating. Here is the code (CSS):
#selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 555;
border: none;
overflow:auto;}
.selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 255;
border: none;
overflow:auto;}
.selenasocial img {
border: none;}
.twitsocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
.facesocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
And here is the HTML, I am using Widgets (and yes, they have been styled correctly in functions.php):
<!-- Selena Gomez Social Networks -->
<div class="selenasocial">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar") ) : ?> <?php endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar 2") ) : ?> <?php endif;?>
</div>
I overcame the error in IE (as it was happening there, too) by copying the CSS above into a separate IE.css file. I just don't understand why two browsers which are leaps and bounds ahead of IE aren't reading from the main CSS file.
Any help would be HUGELY appreciated - I've been tearing my hair out about this for the past few days.
Thanks in advance!
There's (technically) nothing wrong with your code - the part you posted. You are setting both float properties to left, which I guess is not what you want, but that did not explain why the other properties were getting ignored.
I won't read your 4700-lines CSS file to find what is wrong with it but I will try to help you do it yourself.
The first thing I did was to try to hunt the CSS code you posted with firebug and, to my surprise, it was not there. The very last line of CSS firefug gave me was the 902th which was this:
.clearfix {
zoom: 1;
}
Actually, firebug did not show that zoom thing (the brackets were empty). So I went to the CSS file directly to find it out and, after wondering why would anyone use such non-standardized property, I checked the next lines to find there was a parentheses instead of a bracket in the 907th line.
After finding such error I proceeded to run a CSS validator on your CSS file and results were not very good. Fix those errors and Firefox will draw that properly.
Deciding whether IE and Chrome's capability of interpreting wrong CSS files is actually good or bad is not to be discussed here but learning how to find and correct your mistakes can help you get things to work with stricter browsers.
I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.
Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.
This is mostly visible in Firefox 3.x and older versions of Chrome
Here's the sample code to play with:
http://jsfiddle.net/vfp3v/1/
div {
-moz-border-radius: 45px;
border-radius: 45px;
background-color: #ccc;
font-size: 100px;
color: #777;
line-height: 70%;
overflow: hidden;
width: 257px;
}
the jank:
Notice it's been fixed in the new Chrome and FireFox 4 - the shui:
Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers
This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/
It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.
I just added a span:
<div><span></span>WXYZ</div>
and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:
div{
position:relative;
etc...
}
span{
position:absolute; display:block; width:100%; height:100%;
border:25px solid #fff; top:-25px; left:-25px;
-moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */
}
edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!
In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).
Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.
Any way to fix this without setting the image as a background image or processing it before I put it on my site?
Workaround: Set the image as the background of a container element, then add border radius on that element.
Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.
--edit
OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:
img {
border: 10px solid white;
-moz-border-radius: 10px;
}
But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.
I think to have the answer but sorry for my english...
I resolved the question putting another div with border and no background color over the image.
#imageContainer {
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:1;
}
#borderContainer {
position:absolute;
border:1px solid #FFFFFF;
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:10;
}
Workaround: Set the image as the
background of a container element,
then add border radius on that
element.
This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.
So I agree with Alex, that is if you make the image the size of the div/other elm.
I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.
So that looks like this:
<div id="container">
<img src="images/fubar.jpg" alt="situation normal" />
<div class="rounded lt"></div>
<div class="rounded rt"></div>
<div class="rounded lb"></div>
<div class="rounded rb"></div>
</div>
Then the CSS:
#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.
Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.
.round_image_borders {
position:relative; // fix for IE8(others not tested)
z-index:1; // fix for IE8(others not tested)
width:114px;
height:114px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior:url(border-radius.htc); // fix for IE8(others not tested)
}
I got the "border-radius.htc" script from this link:
http://code.google.com/p/curved-corner/
What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.
This works for:
FF 3.6.16
IE 8
Chrome 12.0
And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.
If you use overflow: hidden it won't display the image corners sticking out.
Who knows, they still might be there, just hidden.
img {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)
Is there a good cross-browser way to set a max-height property of a DIV and when that DIV goes beyond the max-height, it turns into an overflow with scrollbars?
Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:
div{
_height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:scroll;
}
Overflow:auto would most likely work in most cases for have any extra spill over.
I found this solution from a post made in 2005 (Min-Height Fast hack). It's a hack but it's simple and pure CSS:
selector {
max-height:500px;
height:auto !important;
height:500px;
}
The example is for max-height, but it works for min-height, min-width and max-width. :)
*Note: You must use absolute values, percentages don't work.
All you need now is the "overflow:scroll;" to make this work with scroll bars
selector
{
max-height:900px;
_height:expression(this.scrollHeight>899?"900px":"auto");
overflow:auto;
overflow-x:hidden;
}
Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?
Major hack (RedWolves-style):
.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
I was getting no love from the max-height attribute so I had this alreadyand succeeded with these 2 classes. But it's ugly so in searching for better hit this question. divMax having position:absolute lets content underneath show through but controls the ultimate height of divInner to 200px.
I found this from http://www.tutorialspoint.com/css/css_scrollbars.htm and modified a bit. It seems working for both IE9 and FF19
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
max-height:100px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height: 100px !important;
max-height:110px;
overflow:hidden;
overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>