www.webdeveloper.com
Results 1 to 3 of 3

Thread: Extending a border

  1. #1
    Join Date
    Jun 2005
    Posts
    84

    Extending a border

    Is it possible to extend a border so it goes out a little farther than the element?

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there mizas,
    Is it possible to extend a border so it goes out a little farther than the element?
    No, you will have to resort to trickery
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #outer {
        width:100px;
        padding:0 5px;
        border-top:1px solid #000;
        margin:20px auto;
     }
    #inner {
        height:100px;
        background-color:#fcc;
     }
    </style>
    
    </head>
    <body>
    
    <div id="outer">
    <div id="inner"></div>
    </div>
    
    </body>
    </html>
    coothead

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Or a single-DIV solution is to use existing borders on the sole element:
    <div style="width:200px; border-top:10px solid black; border-left:20px solid white; border-right:20px solid white; padding:5px; margin:20px; background-color: pink;">
    <p>content goes here</p>
    </div>
    Caveat is that if the border-top is more than 1px, you start to get 'picture frame edges' effect.. But maybe this is something you would want(??).
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles