CSS corner thing effect.

Forum Moderators: not2easy

Message Too Old, No Replies

CSS corner thing effect.

sorry i really dont know what to call this... i've never seen it done befor

dwreck

3:59 am on Nov 17, 2010 (gmt 0)

Hey i have know very little about CSS, but i manage to do all my own css and xhtml.

Im in the process of designing a layout for a radio website, almost all my divs are going to have this same corner effect and i was wondering if someone could help me or guide me towards doing this with pure CSS possibly...

Thanks a lot, any help is appreciated.

here is a link to an image of what im trying to do.
never seen this done before...

[img13.imageshack.us...]

milosevic

9:46 am on Nov 17, 2010 (gmt 0)

I can see one possible way that you could try out, with a black border around the outer container and two rectangular divs inside positioned over it in a cross shape - you could use a negative margin value to stretch them so they cover the edges. This would leave only the corners of the border of the outer container visible.

Otherwise I think you will need to use a bg image for each corner or for top/bottom

dwreck

1:09 pm on Nov 17, 2010 (gmt 0)

i was thinking that
to put a bg image in each corner....

how would i achieve placing a bg image in the corners only?

birdbrain

1:15 pm on Nov 17, 2010 (gmt 0)

Hi there dwreck,

and a warm welcome to these forums. ;)

Here is a pure CSS example for you to try...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>box borders</title> 
 
<style type="text/css"> 
#box { 
 width:246px; 
 padding:4px; 
 border:4px solid #d1d1d1;  
 background-color:#000; 
 margin:auto; 
 } 
#top,#bottom { 
 width:206px; 
 height:4px; 
 font-size:0; 
 margin:-4px auto 0; 
 background-color:#fff; 
 } 
#left,#right { 
 float:left; 
 width:4px; 
 height:266px; 
 margin:20px 0 0 -4px; 
 background-color:#fff;  
 } 
#content { 
 float:left; 
 width:226px; 
 height:296px; 
 padding:5px 10px; 
 background-color:#fff; 
 } 
#right { 
 margin:20px -4px 0 0;  
 } 
#bottom { 
 clear:both; 
 margin:0 auto -4px; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="box"> 
 
<div id="top"></div> 
<div id="left"></div> 
 
<div id="content"> 
 your content goes here 
</div> 
 
<div id="right"></div> 
<div id="bottom"></div> 
 
</div><!--end #box --> 
 
</body> 
</html>

birdbrain

TheKiller

12:31 pm on Nov 24, 2010 (gmt 0)

O-o thats nice birdbrain
i think i may use that sometime myself :D