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!

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

round box implementation

Status
Not open for further replies.

nastir

Technical User
Jun 10, 2005
1
GR
Hi here is my question i have this .css code its from it displays a block ffor features in my website

-----------------------------------------------------
FeatureHeadTable {
background-color:#efefef;
width:99%;
margin-top:5px;
}

.FeatureHeadTD {
background: #4068AE url('../styles/blue05/images/menutop.jpg') repeat;
height:19px;
padding:2px;
padding-left:100px;
color:#FFF;
font-weight:800;
text-align:right;
filter:alpha(Opacity=60,FinishOpacity=100,Style=1,StartX=0,FinishX=0,StartY=40,FinishY=99);
}

.FeatureTitleTD {
background-color:#F3F3F3;
padding-left:8px;
}

.FeatureTitleFont, .FeatureTitleFont:link, .FeatureTitleFont:visited {
color:#616F7E;
}

.FeatureTitleFont:hover {
color:#333;
}

.FeatureTable {
width:99%;
height:120px;
}

.FeatureSpacer {
height:3px;
}

.FeatureTD {
background-color:#F9F9F9;
color:#333;
padding:8px;
}

.FeatureFont {
font: 11px verdana, sans-serif;
color:#333;
}

.FeatureFont:visited, .FeatureFont:link {
text-decoration:underline;
color:#333;
}

.FeatureFont:hover {
text-decoration:
underline;color:#000;
}
----------------------------------------------------
i want to implement round corners and i have found the code mentioned bellow wich will place the roundtable gifs in the feature td

----------------------------------------------------
roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
---------------------------------------------------
any idea?
 
Maybe you heard of technique doing round corners without a single picture? Here is one:


I grasp its main trick is using CSS "overflow:hidden" layer by layer to chisel a rounded corner.

Sure a paper to be proud of. Bandwidth advantage aside, good for (1) web developer unfamiliar with imaging, (2) web server incapable of generating dynamic pictures (tools PIL, ImageMagic, etc), based on neighboring colors, (3) demanding requirements on tabbed menu, e.g. all four corners are different.

Pity about its "fully copyrighted" terms. Plus a non-English website which is supposed to sell it.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top