Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ROUNDED CORNERS 1

Status
Not open for further replies.
gsc123

gsc123

Programmer
Jan 24, 2008
197
Hello,

Anyone tell me how I get rounded corners at the top of the page and the bottom like this site has?

 
Sort by date Sort by votes
So if I have defined in my stylesheet

TABLE.PageBorder {
border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;

}

how do I call it?
 
Upvote 0 Downvote
I created a class in my stylesheet

.PageBorder {
border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;

}

then called it like

<TABLE CLASS="PageBorder"

still dont work?
 
Upvote 0 Downvote
Hi

HTML: 
[b]<table[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"PageBorder"[/i][/green][b]>[/b]
Note that you have to set the [tt]border-style[/tt] to something visible to see the effect of the style. Also note that CSS3's status is working draft, so it is not really supported yet. To have rounded border in older Gecko ( FireFox, SeaMonkey ) and WebKit ( Safari, Chrome, Midori ) based browsers, add the proprietary properties too :
CSS: 
[purple].PageBorder[/purple] [teal]{[/teal]
    [blue]border-style:[/blue] [green]solid[/green];

    [blue]border-top-left-radius:[/blue]     [green]4em[/green];
    [blue]border-top-right-radius:[/blue]    [green]4em[/green];
    [blue]border-bottom-right-radius:[/blue] [green]4em[/green];
    [blue]border-bottom-left-radius:[/blue]  [green]4em[/green];

    [blue]-moz-border-radius:[/blue] [green]4em[/green];
    [blue]-webkit-border-radius:[/blue] [green]4em[/green];
[teal]}[/teal]
Note that was not the best idea to pick exactly this solution from those three.

Feherke.
 
Upvote 0 Downvote
Its calling the class because I tested this with a background color but the radius dont work any idea why pls?
 
Upvote 0 Downvote
I see so are these using these within the tables? or css sheets>
 
Upvote 0 Downvote
They are images specified in the CSS (
DIV#topheader .ul {
background: url(mainrect-corner-ul.gif) no-repeat 0 0
}
DIV#topheader .ur {
background: url(mainrect-corner-ur.gif) no-repeat 100% 0
}


Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
I see, so those files would be in the folder of the stylesheet define then declared somewhere on the page?<div class=?
 
Upvote 0 Downvote
gsc123 - you can find a lot of info out about how a site does things by doing a "View Source" on it.

This includes looking at a site's stylesheet, as it will be there in the header block, and you can modify the URL in the browser to show you that file.

Chip H.



____________________________________________________________________
www.chipholland.com
 
Upvote 0 Downvote
You can also have round corners using only CSS - Here is an example
Code: 
<div class="inset" style="width: 100%;">
	<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
	<div class="boxcontent">
		<div style="width: 45%; float: left; margin-left: 4px;">
			Hello World!
		</div>
		<div style="clear: both;"></div>
	</div>
	<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
<div style="clear: both;"></div>
and the CSS would be
Code: 
/* Inset 3D Curved */
.inset {
  background:transparent;
  }
.inset h1, .inset p {
  margin:0 10px;
  }
.inset h1 {
  font-size:2em; color:#4d6e23;
  }
.inset p {
  padding-bottom:0.5em;
  }
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
  display:block; 
  overflow:hidden;
  font-size:1px;
  }
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
  height: 1px;
  }
.inset .b2 {
  background:#18190c; 
  border-left:1px solid #4d6e23; 
  border-right:1px solid #4d6e23;
  }
.inset .b3 {
  background:#18190c; 
  border-left:1px solid #4d6e23; 
  border-right:1px solid #4d6e23;
  }
.inset .b4 {
  background:#18190c; 
  border-left:1px solid #4d6e23; 
  border-right:1px solid #4d6e23;
  }
.inset .b4b {
  background:#18190c; 
  border-left:1px solid #4d6e23; 
  border-right:1px solid #4d6e23;
  }
.inset .b3b {
  background:#18190c; 
  border-left:1px solid #4d6e23; 
  border-right:1px solid #4d6e23;
  }
.inset .b2b {
  background:#18190c; 
  border-left:1px solid #4d6e23; 
  border-right:1px solid #4d6e23;
  }
.inset .b1 {
  margin:0 5px; 
  background:#4d6e23;
  }
.inset .b2, .inset .b2b {
  margin:0 3px; 
  border-width:0 2px;
  }
.inset .b3, .inset .b3b {
  margin:0 2px;
  }
.inset .b4, .inset .b4b {
  height:2px; margin:0 1px;
  }
.inset .b1b {
  margin:0 5px; 
  background:#4d6e23;
  }
.inset .boxcontent {
  display:block; 
  background:#18190c; 
  border-left:1px solid #4d6e23; 
  border-right:1px solid #4d6e23;
  min-height: 360px;
  height:auto !important;   /* Holy hack for IE */
  height:360px;				/* These two lines are needed for IE to actually set a minimum height */
  }
/* END Inset 3D curve */

This is not my work, I found it online some where a few weeks back - So, not remembering where I got it, I cannot give proper credits. That being said, many thanks to the original author!

Hope you find it useful as I have!

Regards,


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Upvote 0 Downvote
I've used the approach southbeach on my site but removed it in a recent upgrade as it was not truely CSS compliant, so I reworked it with SPAN's instead of the B's so it now is compliant.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
Thats good, how would I align it centre of the screnn with the background of the mainpage c0c0c0 and the <div foreground white?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
99
lupidol
lupidol
waydown
  • Locked
  • Question
rounded corners not working in IE 2
Replies
1
Views
53
feherke
feherke
stephenmbell
  • Locked
  • Question
help with div tags and *rounded corners*
Replies
5
Views
43
Vragabond
Vragabond
bam720
  • Locked
  • Helpful tip
CSS Rounded Corners: 1 image
Replies
7
Views
39
kaht
kaht
rockyroad
  • Locked
  • Question
rounded corners - on one side? 1
Replies
1
Views
26
Vragabond
Vragabond

Part and Inventory Search

Sponsor

Back
Top