Hi Everyone,
I am trying to make a outset border with CSS. I would like the white space to have rounded corners. Hope this make sense. I know how to create broders with tables but not sure how with CSS and rounded corner. Any Advise?
Thanks
This is what I have for a table don't know hot to change to get rounded corner and use CSS.
<table cellpadding=0 cellspacing=0 border=0 width=748 height=543 style="border:3px solid #FFFFFF" bgcolor="#FFFFFF">Do a search. This is discussed many places.Check out the "Samples of my work > Round Corners Generator" at:
<!-- m --><a class="postlink" href="http://spruce.flint.umich.edu/~jalarie/http://www.google.com/search?num=30&hl=en&lr=&safe=off&q=css+rounded+corners&btnG=SearchRounded">http://spruce.flint.umich.edu/~jalarie/ ... rchRounded</a><!-- m --> borders with CSS still require using a GIF or JPG small image: that's why I gave up using them.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius">http://www.w3.org/TR/2005/WD-css3-backg ... der-radius</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow">http://www.w3.org/TR/2005/WD-css3-backg ... box-shadow</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/customcorners/">http://www.alistapart.com/articles/customcorners/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.vertexwerks.com/tests/sidebox/">http://www.vertexwerks.com/tests/sidebox/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.albin.net/CSS/roundedCorners/#note1The">http://www.albin.net/CSS/roundedCorners/#note1The</a><!-- m --> nice thing is that you don't need images:
<!-- m --><a class="postlink" href="http://pro.html.it/esempio/nifty/">http://pro.html.it/esempio/nifty/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/That's">http://www.fireandknowledge.org/archive ... t-1/That's</a><!-- m --> interesting. I haven't tried the code yet, but do you know if it works on both browsers and if you can use a border around the rounded corners?
Thanks.Of <!-- m --><a class="postlink" href="http://pro.html.it/esempio/nifty/">http://pro.html.it/esempio/nifty/</a><!-- m -->:
The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.<!-- m --><a class="postlink" href="http://wodeh.mine.nu/roundedCorners.html">http://wodeh.mine.nu/roundedCorners.html</a><!-- m -->
I modified the technique slightly, replacing margins with borders so the function call requires only one colour. I also "tucked" the rounded strips in so they do not change the size of the divs you round. My modifications allow some of the examples to be done in one function call rather than a separate one for top and bottom.
My modifications come at the loss of transparency on the corners, but can still be useful- I believe.
Code available here: <!-- m --><a class="postlink" href="http://wodeh.mine.nuI">http://wodeh.mine.nuI</a><!-- m --> was looking at your example on IE, but I don't see a border around the oval frame.You miss my point- instead of using margins to generate the effect I used borders. I didn't mean I actually put borders around the rounded corners, although I did try to it's generally not possible .. or at least not desirable without anti-aliasing.Thanks guys for the help! I will try your suggestions now. Thanks againThat's pretty nifty Bootsman...Almost figured out that one by myself then Tah-DAH! you splurt it out for me
I am trying to make a outset border with CSS. I would like the white space to have rounded corners. Hope this make sense. I know how to create broders with tables but not sure how with CSS and rounded corner. Any Advise?
Thanks
This is what I have for a table don't know hot to change to get rounded corner and use CSS.
<table cellpadding=0 cellspacing=0 border=0 width=748 height=543 style="border:3px solid #FFFFFF" bgcolor="#FFFFFF">Do a search. This is discussed many places.Check out the "Samples of my work > Round Corners Generator" at:
<!-- m --><a class="postlink" href="http://spruce.flint.umich.edu/~jalarie/http://www.google.com/search?num=30&hl=en&lr=&safe=off&q=css+rounded+corners&btnG=SearchRounded">http://spruce.flint.umich.edu/~jalarie/ ... rchRounded</a><!-- m --> borders with CSS still require using a GIF or JPG small image: that's why I gave up using them.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius">http://www.w3.org/TR/2005/WD-css3-backg ... der-radius</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow">http://www.w3.org/TR/2005/WD-css3-backg ... box-shadow</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/customcorners/">http://www.alistapart.com/articles/customcorners/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.vertexwerks.com/tests/sidebox/">http://www.vertexwerks.com/tests/sidebox/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.albin.net/CSS/roundedCorners/#note1The">http://www.albin.net/CSS/roundedCorners/#note1The</a><!-- m --> nice thing is that you don't need images:
<!-- m --><a class="postlink" href="http://pro.html.it/esempio/nifty/">http://pro.html.it/esempio/nifty/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/That's">http://www.fireandknowledge.org/archive ... t-1/That's</a><!-- m --> interesting. I haven't tried the code yet, but do you know if it works on both browsers and if you can use a border around the rounded corners?
Thanks.Of <!-- m --><a class="postlink" href="http://pro.html.it/esempio/nifty/">http://pro.html.it/esempio/nifty/</a><!-- m -->:
The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.<!-- m --><a class="postlink" href="http://wodeh.mine.nu/roundedCorners.html">http://wodeh.mine.nu/roundedCorners.html</a><!-- m -->
I modified the technique slightly, replacing margins with borders so the function call requires only one colour. I also "tucked" the rounded strips in so they do not change the size of the divs you round. My modifications allow some of the examples to be done in one function call rather than a separate one for top and bottom.
My modifications come at the loss of transparency on the corners, but can still be useful- I believe.
Code available here: <!-- m --><a class="postlink" href="http://wodeh.mine.nuI">http://wodeh.mine.nuI</a><!-- m --> was looking at your example on IE, but I don't see a border around the oval frame.You miss my point- instead of using margins to generate the effect I used borders. I didn't mean I actually put borders around the rounded corners, although I did try to it's generally not possible .. or at least not desirable without anti-aliasing.Thanks guys for the help! I will try your suggestions now. Thanks againThat's pretty nifty Bootsman...Almost figured out that one by myself then Tah-DAH! you splurt it out for me