CSS3 PIE Forums
http://css3pie.com/forum/

A Headline With Its Own Style
http://css3pie.com/forum/viewtopic.php?f=4&t=1676
Page 1 of 1

Author:  grandpa [ Tue May 29, 2012 9:10 am ]
Post subject:  A Headline With Its Own Style

Most (all) my knowledge dates back to html3 and the early table-infected times - So I have a lot of 'catching up' to do 8^)

Unfortunately I have a problem which cannot wait for my pretty slow progress:

As a newcomer, [img] is OFF so I can't show you directly but I want to make a CSS3/Pie Box with round corners AND a headline with its own style like box no. 2 on ruzee.com

since it shall work in IE too I thought I would start asking for help around here.

Pls. bear with me and write as grandpa-friendly as possible :)

Author:  grandpa [ Tue May 29, 2012 11:39 am ]
Post subject:  Re: A Headline With Its Own Style

I could add that so far I have googled my way to something like

Code:
<div class="boxborderradius">
    <div class="header">Title text</div>
    <div class="content">content goes here</div>
</div>


where

Code:
.boxborderradius {
   border:1px solid #dadada;
   border-radius:15px;
   -moz-border-radius:15px;
   -webkit-border-radius:15px;
   -o-border-radius: 15px;
   }
.header {
   background: none repeat scroll 0 0 #F5F7F6;
   height: 25px;
   padding: 4px 10px 0;
   text-align: left;
   border-radius:15px;
   -moz-border-radius:15px;
   -webkit-border-radius:15px;
   -o-border-radius: 15px;
   }
.content { width:auto; }


But will the header border only round on the two top corners?!?

Author:  Tonttu [ Wed May 30, 2012 5:13 am ]
Post subject:  Re: A Headline With Its Own Style

grandpa wrote:
But will the header border only round on the two top corners?!?


You can select which corners to round and how much: http://css3pie.com/documentation/suppor ... der-radius

Quote:
Only the shorthand version is supported; the longhand border-top-left-radius etc. properties are not. The shorthand syntax does support different radii per corner, though:

border-radius: 5px 10px 15px 20px; (top-left, top-right, bottom-right, bottom-left).

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/