Rounded corners?-How?

Discussion in 'Graphics & Multimedia' started by indyonline, Dec 8, 2007.

  1. #1
    Hello. I'm building a page with a background and I want to add a white area in the center of the page that I will put my text on. How can I make the corners of the white box rounded? I use dreamweaver software if there is a way to do it with dreamweaver.Thanks.
     
    indyonline, Dec 8, 2007 IP
  2. indyonline

    indyonline Prominent Member

    Messages:
    4,626
    Likes Received:
    248
    Best Answers:
    2
    Trophy Points:
    335
    #2
    any ideas on this. Thank you
     
    indyonline, Dec 8, 2007 IP
  3. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #3
    Yes - answer is css :)
     
    sundaybrew, Dec 8, 2007 IP
  4. indyonline

    indyonline Prominent Member

    Messages:
    4,626
    Likes Received:
    248
    Best Answers:
    2
    Trophy Points:
    335
    #4
    OK. my site uses css is there a code?
    Thanks
     
    indyonline, Dec 8, 2007 IP
  5. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #5
    sundaybrew, Dec 8, 2007 IP
  6. indyonline

    indyonline Prominent Member

    Messages:
    4,626
    Likes Received:
    248
    Best Answers:
    2
    Trophy Points:
    335
    #6
    thank you. very helpful.
     
    indyonline, Dec 8, 2007 IP
  7. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #7
    Your welcome, Thats how I learned by actually googling it :)

    Its kinda easy once you read it

    Have fun !!!
     
    sundaybrew, Dec 8, 2007 IP
  8. jbladeus

    jbladeus Peon

    Messages:
    485
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #8
    jbladeus, Dec 9, 2007 IP
  9. agilius

    agilius Well-Known Member

    Messages:
    1,021
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    100
    #9
    This rounded corner idea is cool but I thought that there was a propriety that was making the div item have rounded corners without using images... :) Nice share sundaybrew's, useful.
     
    agilius, Dec 9, 2007 IP
  10. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #10
    Yes , there is


    Here I will help

    Use this in your style sheet as the class

    .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:#FFFFFF; border-left:1px solid #C0D3E2; border-right:1px solid #C0D3E2;}
    .xb1 {margin:0 5px; background:#FFFFFF;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    
    .xboxcontent {display:block; background:#FFFFFF; border:0 solid #C0D3E2; border-width:0 1px; padding: 0px 0px 0px 0px}
    
    
    .thtop, .thbottom {display:block; background:transparent; font-size:1px;}
    .th1, .th2, .th3, .th4 {display:block; overflow:hidden;}
    .th1, .th2, .th3 {height:1px;}
    .th2, .th3, .th4 {background:#FFFFFF; border-left:1px solid #C0D3E2; border-right:1px solid #C0D3E2;}
    .th1 {margin:0 5px; background:#C0D3E2;}
    .th2 {margin:0 3px; border-width:0 2px;}
    .th3 {margin:0 2px;}
    .th4 {height:2px; margin:0 1px;}
    
    PHP:

    Then use this for the wrap in your code

    <div style="padding-left: 10px;">
    
    
    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    <div class="xboxcontent">
    
    
    YOUR STUFF IN HERE 
    
    
    </div>
    <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
    </div>
    HTML:

    Then you will have corners , :)
     
    sundaybrew, Dec 9, 2007 IP
  11. agilius

    agilius Well-Known Member

    Messages:
    1,021
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    100
    #11
    Hehe nice idea. I understood perfectly what you did here without putting it into work. This is the case of a good tutorial. You should blog it somewhere ;)
     
    agilius, Dec 9, 2007 IP
    ValleyMan likes this.
  12. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #12

    Just did :)...............Enjoy
     
    sundaybrew, Dec 9, 2007 IP
  13. ValleyMan

    ValleyMan Banned

    Messages:
    455
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #13
    This is a real forum chat.. proper one. reps added :D
     
    ValleyMan, Dec 9, 2007 IP
    sundaybrew likes this.