SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css curve on div

    Hello,

    I know you can make round cornors with css however has anyone done anything like this (please see attachment)?

    Is this possible with css?


    Thanks
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    You can do it with border-radius for good browsers (IE9+).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    div {
        background:#cbe9ff;
        border:2px solid #a1c1e7;
        padding:10px;
        width:300px;
        -moz-border-radius:500px / 80px;
        -webkit-border-radius:500px / 80px;
        border-radius:500px / 80px;
    }
    p {
        margin:0 0 1em;
    }
    </style>
    </head>
    <body>
    <div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>

    If you want older browser support then it will be the usual image background round corner techniques.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


Bookmarks

Posting Permissions

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