Posted By

mn232nm on 11/02/08

Tagged

Versions (?)

Last Edited at 11/02/08 06:00am

Statistics

Viewed 695 times

Favorited by 2 user(s)

Related snippets

CSS Rounded borders without images

/ Published in: HTML

Rounded borders without images

Highlighted TextExpand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>çº¯CSSåˆ¶ä½œçš„åœ†è§’è¾¹æ¡†</title>
    <style type="text/css">
            body
            {
                font-size:12px;
            }
            #xsnazzy h1, #xsnazzy h2, #xsnazzy p 
            {
                margin:0 10px; 
                letter-spacing:1px;
            }
            #xsnazzy h1 
            {
                font-size:2.5em; 
                color:#06a;
            }
            #xsnazzy h2 
            {
                font-size:2em;
                color:#06a; 
                border:0;
            }
            #xsnazzy p 
            {
                padding-bottom:0.5em;
            }
            #xsnazzy h2 
            {
                padding-top:0.5em;
            }
            #xsnazzy 
            {
                background: transparent; 
                margin:1em;
            }

.xtop, .xbottom 
            {
                display:block; 
                background:transparent; 
                font-size:2px;
            }
            .xb1, .xb2, .xb3, .xb4 
            {
                display:block; 
                overflow:hidden;
            }
            .xb1, .xb2, .xb3 
            {
                height:1px;
            }
            .xb2, .xb3, .xb4 
            {
                background:#fff; 
                border-left:1px solid #08c; 
                border-right:1px solid #08c;
            }
            
            .xb1 {margin:0 5px; background:#08c;}
            .xb2 {margin:0 3px; border-width:0 2px;}
            .xb3 {margin:0 2px;}
            .xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#fff; border:0 solid #08c; border-width:0 1px;}
            
        </style>
</head>
<body>
    <div id="xsnazzy">
        <b class="xtop">
            <b class="xb1" ></b>
            <b class="xb2"></b>
            <b class="xb3"></b>
            <b class="xb4"></b>
        </b>
        <div class="xboxcontent">
            <h1>
                Snazzy Borders</h1>
            <p>
                Based on Nifty Corners By Alessandro Fulciniti<br />
                http://pro.html.it/esempio/nifty/</p>
            <h2>
                Rounded borders without images</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
                minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
                ex ea commodo consequat.</p>
            <p>
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
                vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
                dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
                nulla facilisi.</p>
        </div>
        
        <b class="xbottom">
            <b class="xb4"></b>
            <b class="xb3"></b>
            <b class="xb2"></b>
            <b class="xb1"></b>
        </b>
    </div>
</body>
</html>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.