if our webmasters here at daniweb would be so kind

GreenDay2001 · 2006-11-18T15:39:25+00:00

several ways to do that:
1. use tables and images to do that
2. use css and images
3. use javascript(most reliable and most probably used at daniweb to)
4. CSS3(which is not yet supported by browsers)

for a javascript snippet
http://www.html.it/articoli/nifty/index.html

Last Seen 12 Minutes Ago · 2006-11-23T14:14:20+00:00

We use the CSS method because I was having a problem getting the JavaScript method to be as cross-compatible among browsers and platforms as I would have liked.

All hacks are custom so nothing off of vB.org :)

sinjix_media 0 Light Poster · 2006-11-23T16:40:39+00:00

We use the CSS method because I was having a problem getting the JavaScript method to be as cross-compatible among browsers and platforms as I would have liked.
All hacks are custom so nothing off of vB.org :)

so u just do the old fashioned 4 images in a table CSS thing?

GreenDay2001 · 2006-11-23T17:11:16+00:00

so u just do the old fashioned 4 images in a table CSS thing?

it's not old fashioned, i suppose. css is even needed when you use javascript. also several people still use that old method.

sinjix_media 0 Light Poster · 2007-05-20T13:18:01+00:00

I STILL haven't figured out a good way for doing this.

Spaiz 4 Newbie Poster · 2007-05-23T20:48:06+00:00

There's another way to do it, pure css.

Try this:

<html>
<head>
<title>Round Corners</title>
<style>
*{margin:0}
body{font:105% arial;text-align:center;padding-top:4em}
h1{color:white;text-align:center;padding:10px 0 10px 0}
.sm_box{margin:0 auto;width:50%}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d{height:1px}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d,.sm_box .content{background:#7fdcff;overflow:hidden;border:0 solid #7fdcff;border-width:0 1px}
.sm_box .a{margin:0 5px;background:#7fdcff;border:0}
.sm_box .b{margin:0 3px;border-width:0 2px}
.sm_box .c{margin:0 2px}
.sm_box .d{height:2px;margin:0 1px}
.sm_box .content{padding:0}
</style>
</head>
<body>
 <div class=sm_box>
  <div class=a></div><div class=b></div><div class=c></div><div class=d></div>
  <div class=content>
   <h1>Round<br>Corners</h1>
  </div>
  <div class=d></div><div class=c></div><div class=b></div><div class=a></div>
 </div>
</body>
</html>

The idea is to create 4 lines each is 1px high, and each line is shorter than the other one by 1 or 2 px:

-----------
  ---------------
 -----------------
-------------------
       content...
-------------------
 -----------------
  ---------------
    -----------

and that makes the round corner effect.
:)

p.s. daniweb corners are made with jquery (i think so)

sinjix_media 0 Light Poster · 2007-05-23T21:52:06+00:00

There's another way to do it, pure css.

Try this:

<html>
<head>
<title>Round Corners</title>
<style>
*{margin:0}
body{font:105% arial;text-align:center;padding-top:4em}
h1{color:white;text-align:center;padding:10px 0 10px 0}
.sm_box{margin:0 auto;width:50%}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d{height:1px}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d,.sm_box .content{background:#7fdcff;overflow:hidden;border:0 solid #7fdcff;border-width:0 1px}
.sm_box .a{margin:0 5px;background:#7fdcff;border:0}
.sm_box .b{margin:0 3px;border-width:0 2px}
.sm_box .c{margin:0 2px}
.sm_box .d{height:2px;margin:0 1px}
.sm_box .content{padding:0}
</style>
</head>
<body>
 <div class=sm_box>
  <div class=a></div><div class=b></div><div class=c></div><div class=d></div>
  <div class=content>
   <h1>Round<br>Corners</h1>
  </div>
  <div class=d></div><div class=c></div><div class=b></div><div class=a></div>
 </div>
</body>
</html>

The idea is to create 4 lines each is 1px high, and each line is shorter than the other one by 1 or 2 px:

-----------
  ---------------
 -----------------
-------------------
       content...
-------------------
 -----------------
  ---------------
    -----------

and that makes the round corner effect.
:)

p.s. daniweb corners are made with jquery (i think so)

WOW! That is AMAZING! Is that totally cross browser compatible!?
You are a god-send bro!
Listen, I have these classes I want to modify to be the same as they are shown below, but with rounded corners. Can you change one for me as an example?

.tcat
{
background: #869BBF url(../../images/gradients/gradient_tcat.gif) repeat-x top left;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
color: #ffffff;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #ffffff;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #FFFF66;
text-decoration: underline;
}
.thead
{
background: #5C7099 url(../../images/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #FFFF00;
}

sinjix_media 0 Light Poster · 2007-05-23T22:00:50+00:00

Oh yeah, and is it possible to have a border on it as well?

Last Seen 12 Minutes Ago · 2007-05-23T22:23:25+00:00

DaniWeb corners use JQuery to dynamically insert multiple divs at the top and bottom of the div that needs to be rounded using the same technique as Spaiz illustrated.

sinjix_media 0 Light Poster · 2007-05-24T02:32:19+00:00

DaniWeb corners use JQuery to dynamically insert multiple divs at the top and bottom of the div that needs to be rounded using the same technique as Spaiz illustrated.

What about the borders?
I don't mean to nag, but did you see my other question?

Spaiz 4 Newbie Poster · 2007-05-24T06:52:49+00:00

Oh yeah, and is it possible to have a border on it as well?

Check those two lines from the code I posted above:

.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d,.sm_box .content{background:#7fdcff;overflow:hidden;border:0 solid #7fdcff;border-width:0 1px}
.sm_box .a{margin:0 5px;background:#7fdcff;border:0}

try to play with the colors (change all 3 #7fdcff to something different), that way you will undarstand more how it works, and you will get the borders you want :)

or change all the #7fdcff to #000000 one by one and refresh the window each time, to see what change.

sinjix_media 0 Light Poster · 2007-05-31T12:23:16+00:00

Isn't this CSS?

$('div#heading').corner("cc:#FFFFFF top");  $('div.box').corner("cc:#FFFFFF"); $('.panel').corner("cc:#FFFFFF");

sinjix_media 0 Light Poster · 2007-05-31T12:43:13+00:00

We use the CSS method because I was having a problem getting the JavaScript method to be as cross-compatible among browsers and platforms as I would have liked.
All hacks are custom so nothing off of vB.org :)

It looks like you are using JS again.
How did you fix the cross-compatibility issue?

sinjix_media 0 Light Poster · 2007-05-31T12:46:18+00:00

DaniWeb corners use JQuery to dynamically insert multiple divs at the top and bottom of the div that needs to be rounded using the same technique as Spaiz illustrated.

Im so sorry.
I didn't see that post.
Please ignore my last post.

roryt 150 Nearly a Posting Virtuoso · 2007-06-13T19:32:41+00:00

It is awesome how it is done but it seems to me that it would create alot of extra code. Does anyone know anymore about CSS3?

Last Seen 12 Minutes Ago · 2007-06-14T02:24:51+00:00

Safari, which is now available for Windows too, is CSS3 compatible. I suspect the other browsers out there will be rolling out their own CSS3 versions in the somewhat near future.

if our webmasters here at daniweb would be so kind

Recommended Answers

All 16 Replies

if our webmasters here at daniweb would be so kind

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers