I'm interested in creating a table with rounded corners without using images.
How can this be accomplished?
My idea was that I could wrap the table with a div and to set the rounded corners to the div.
By taking a glance at this fiddle you can see that the tables border overwrites the border of the div. Is there a style which prevents from the overwriting?
Why dont you just take the border of the table out?
The trick to this working is, as #Luis implies, to take the border off the table and apply it to the wrapping div, applying the border-radius to that element.
JS Fiddle demo.
You can look into PIE CSS3 for IE6/7/8 and then CSS3 effects for Chrome/FF/Opera (http://css3pie.com/)
If you don't want the table border you could set border:none on the table element. If you still want the table border, you can set a padding:10px on the div.
Related
How would one create the following 'paintbrush' effect as a border around a div in CSS? The div in this case would be the red box.
Here is another example of a similar situation. The div in this case would be the blue box.
I would say that your best bet is to go with the border-image property
You can find some more info/examples here http://www.css3.info/preview/border-image/ You just need to find the stroke effect that you like and apply it in your case to the border-image
Heres a example
Codepen http://codepen.io/noobskie/pen/EVgaQL
Is it possible to add a box shadow without adding a "margin"? Basically, I have a wrapper div, and I don't want the box-shadow to create a margin.
Yes, it is possible, and in fact, adding a box-shadow does not implicitly add a margin.
A simple example shows this to be true: the spacing between the spans is caused by the space in the source; that is not a margin, and no margin is added.
Ok, I figured out that I didn't do a CSS reset and that fixed it.
i'm having a rather unique problem with CSS and DIV with/without borders.
Now, when i use the DIV without any borders, there is a kind of automatic padding! when i add a border, the padding disappears.
Even when i use "margin:0;padding:0" it still doesn't clear off the padding.
does anyone have any ideas why it's behaving like this? As a result, i had to use a border with the same color as the page background, but now i have same problem with a set of 3 DIV that should be right next to each other and CANNOT have any borders at all.
HELP!
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 Coda slider on one webpage (hand-crafted, not using the plugin, but that's irrelevant) and the outer div has a border-radius.
A bunch of inner divs have background colors, but they stick out on top of the corners when I want them to be BEHIND the rounded corner.
Is there any way to achieve this?
If you apply position:static to the element with overflow:hidden you will achieve the results you are looking for.
Check this out: overflow:hidden, border-radius and position:absolute
I found that WebKit would crop everything if I put overflow: hidden on the element, but Gecko wouldn't (see my blog post for code and screenshots). The best I could do in Gecko was either put a border radius in the inner div too, or add a margin/padding to the wrapper div so that the inner divs sat below the corners.