Extending a border

**mizas** · 11-01-2007 10:35 AM

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

**coothead** · 11-01-2007 10:51 AM

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

**WebJoel** · 11-01-2007 12:20 PM

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(??).

Thread: Extending a border

Thread Tools

Display

Extending a border

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions