When I use CSS rounded corners, they look like this, and it's great:
http://www.incompetence-central.co.uk/roundedcorners-nobg.png
But if I specify a background color for an element inside them (in this case a simple <p> tag), the background color overlays the rounded corners, like so:
http://www.incompetence-central.co.uk/roundedcorners-bgcolor.png
How can I keep my pretty rounded corners without the background color drawing over them? I tried specifying the same rounded corners for the element inside, but if I do that the background color doesn't completely fill the space:
http://www.incompetence-central.co.uk/roundedcorners-hack.png
Don't specify the background color in an inside element, but just that particular element (with the border).
A little math may help too, taking border width into account. If your border radius is 5px, and border width is 1px, then the inner element should use border-radius 4px (5px - 1px border). Experiment and see.
Why don't you set the background colour of the outside element to the same as it's border? That way you won't have the little white space on the corners like you see in your image.
You'll never get it completely perfect, but it is possible to get it as close to perfect so that users just browsing won't see a difference.
Related
Having the situation described in this image, I need to find solution for such a border using CSS-only, if it is possible. The height is not fixed, it can be variable. And the border should start and end like it is shown. And there is a border for that wavy line.
Red color on the screen is just to show you how it works.
I need this to work on IE9+.
IE 9+ is difficult, since border-image property won't work here...
If you can do it withour proper endings, you can just use the border-color in combination with a background image, that is y-repeated and right aligned.
How to make the div border blink, by changing the border color to black and white can be done, but I later decided to keep the background color pink, so white border would be seen, which should not be, by dynamically adding the border and removing it, it disturbs the position of its neighboring elements, Is there anything like making the border black and transparent, alternatively, to make it blink???
First off, animated web-page elements, especially those that alternate between colors are huge design no-no - it distracts the user, might trigger epilepsy (if used excessively), slows down page rendering performance (and drains device batteries unnecessarily), and other undesirable side-effects.
But anyway...
You can have an invisible border by setting the border-color to transparent before changing it to black or white or whatever. That way the border is there when the box flow is computed, it just isn't visible. This is a CSS2+ feature.
An alternative is to use image-borders and set the border image to an animated GIF. This does require CSS3 support for image borders.
I have a div containing pictures that will be updated frequently on WordPress. I would like to avoid having to edit the border of each image. This is kind of a dome-shaped border around a group of 8 photos that I created by using the clipping mask on Photoshop.
Is there a CSS trick I can use to make the border.png file overlay the div with the pictures and become transparent and block out the areas that it covers on the picture div?
Using border: none will remove the border, but also will remove the artificial "padding" from the width of that border. If you want the spacing to stay the same, you can do border-color: transparent. Note, however, that IE6 and earlier do not support border-color's transparent property.
I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin of the same size, to not affect the text-flow. Now this works like a charm. But not on elements that have a background. The background spreads out to the transparent border. This is behaviour seams to be consistent among all browsers.
http://jsfiddle.net/hq65C/1/ here a other example: http://jsfiddle.net/DytDA/
Why is this? I was always thinking that the border is outside of the element. How could I fix this. (I need a solution that does not require to modify the HTML).
How about background-clip: padding-box;?
Demo
i think that if the border were outside the element, the behaviour you are behind (that clicking on the border behaves as clicking inside the element) wouldn't work either
if the background-image is not repeated, you can set background-position x position to the same amount that your border width. else, you can also try setting the border-color to the same as the color behind the element, but if it is an image, good luck
CSS background fills the area of the border, with the border-color layering over this.
As you have a transparent border, it is displaying the background-color behind it.
With plain HTML/CSS, I'm not sure there is a way around this.
This jsFiddle demostrates this:
http://jsfiddle.net/hq65C/8/
try this:
<span style="background: red">link</span> test test test <br/>
test test test
notice: the span means an inline element with another style (other CSS values). other that div which will force a new block.
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
it's size is much larger than my 64x64 image
the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.
The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.