Kod:
<div id="box" class="okragle-wszystkie-rogi"> </div>
#box {
width: 100px;
height: 100px;
background: red;
}
.okragle-wszystkie-rogi {
-webkit-border-radius: 20px; /* Safari, Chrome */
-khtml-border-radius: 20px; /* Konqueror */
-moz-border-radius: 20px; /* Firefox */
border-radius: 20px;
}
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1">
<title>Box by tedd</title>
<link rel="stylesheet"
href="http://sperling.com/examples/box/style.css" media="screen">
</head>
<body>
<div id="box"><!--- box border -->
<div id="lb">
<div id="rb">
<div id="bb">
<div id="blc">
<div id="brc">
<div id="tb">
<div id="tlc">
<div id="trc"><!-- -->
<div id="content">
<h1>Xxxx XX xXX X x xXX x XXXX</h1>
<p>
XXxx XX xxX xxXx</p>
<p><strong> Here is the HTM code.</strong></p>
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br>
"http://www.w3.org/TR/html4/strict.dtd"></p>
<p><html></p>
<p><head><br>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><br>
<title>Box by tedd</title> <br>
<link rel="stylesheet" href="style.css" media="screen"><br>
</head></p>
<p><body></p>
<p> <div id="box"> </p>
<p> <!--- box border --><br>
<div id="lb"><br>
<div id="rb"><br>
<div id="bb"><div id="blc"><div id="brc"><br>
<div id="tb"><div id="tlc"><div id="trc"><br>
<!-- --><br>
<br>
<div id="content"> <br>
<h1>Simple Box by tedd</h1><br>
<br>
<p><br>
View the source code via your browser.<br>
</p><br>
<br>
<br>
</div><br>
<br>
<!--- end of box border --><br>
</div></div></div></div><br>
</div></div></div></div><br>
<!-- --><br>
<br>
</div><br>
</body></p>
<p></html></p>
<p><strong>Here is the CSS file.</strong></p>
<p><br>
/* \*/<br>
* html #tlc, * html #trc {height: 1%;}<br>
/* */</p>
<p>#tlc, #trc { zoom: 1 }</p>
<p>body<br>
{<br>
margin: 0;<br>
padding: 0;<br>
background-color: white;<br>
font-size: 100.01%;<br>
text-align: center; <br>
}</p>
<p>#box<br>
{<br>
position: relative;<br>
margin-left: auto;<br>
margin-right: auto; <br>
margin-top: 3em;<br>
padding: 0;<br>
text-align: left;<br>
width:80%; /* <-- use this to tie width to viewport size */<br>
width: 55em; /* <-- use this for a set width */<br>
background-color: #eeeeee;;<br>
}<br>
<br>
#content<br>
{<br>
padding:3em;<br>
}</p>
<p>#content h1<br>
{<br>
color:#0354c2;<br>
font-weight: bold;<br>
font-size: 1.2em;<br>
font-family: helvetica, geneva, arial, sans-serif;<br>
}<br>
<br>
#content p<br>
{<br>
color:#3b3b3b;<br>
font-size: 1em;<br>
line-height: 1.3em;<br>
font-family: arial, helvetica, sans-serif;<br>
}<br>
<br>
/* ---=== border code follows ===--- */<br>
/*<br>
tlc = top left corner<br>
trc = top right corner<br>
blc = bottom left corner<br>
brc = bottom right corner<br>
lb = left border<br>
rb = right border<br>
tb = top border<br>
bb = bottom border <br>
*/</p>
<p>#tlc, #trc, #blc, #brc<br>
{<br>
background-color: transparent;<br>
background-repeat: no-repeat;<br>
}</p>
<p>#tlc<br>
{<br>
background-image:url(images/tlc.gif);<br>
background-position: 0% 0%;<br>
}</p>
<p>#trc<br>
{<br>
background-image:url(images/trc.gif);<br>
background-position: 100% 0%;<br>
}<br>
<br>
#blc<br>
{<br>
background-image:url(images/blc.gif);<br>
background-position: 0% 100%;<br>
}</p>
<p>#brc<br>
{<br>
background-image:url(images/brc.gif);<br>
background-position: 100% 100%;<br>
}</p>
<p>#tb, #bb<br>
{<br>
background-color: transparent;<br>
background-repeat: repeat-x;<br>
}<br>
<br>
#tb<br>
{<br>
background-image:url(images/tb.gif);<br>
background-position: 0% 0%;<br>
}</p>
<p>#bb<br>
{<br>
background-image:url(images/bb.gif);<br>
background-position: 50% 100%;<br>
}<br>
<br>
#rb<br>
{<br>
background-image:url(images/r.gif);<br>
background-position: 100% 0%;<br>
background-repeat: repeat-y;<br>
}</p>
<p>#lb<br>
{<br>
background-image:url(images/l.gif);<br>
background-position: 0% 100%;<br>
background-repeat: repeat-y;<br>
}<br>
</p>
<pre> </pre>
</div>
<!--- end of box border -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</body>
</html>
http://www.devwebpro.com/25-rounded-corn...-with-css/
Chcesz pomóc? Wstaw jako sygnature na innym forum:
Zapraszam do odwiedzin strony http://portal.pcmod.pl/
Asus P5B Premium :: QuadCore Intel Core 2 Quad Q8300, 2500 MHz (7.5 x 333) BOX :: 2x 2 GB PATRIOT DUAL :: ATI Radeon HD 5770 :: 6x Seagate ST3500320AS 500GB :: HIPER Type-R 580W
Zapraszam do odwiedzin strony http://portal.pcmod.pl/
Asus P5B Premium :: QuadCore Intel Core 2 Quad Q8300, 2500 MHz (7.5 x 333) BOX :: 2x 2 GB PATRIOT DUAL :: ATI Radeon HD 5770 :: 6x Seagate ST3500320AS 500GB :: HIPER Type-R 580W