Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation how to curve corners

    hi, i am learning how to code html and css and i am stuck on how to curve corners of certain parts of my page. for example i want to curve the edges on the container than holds my site. ive started from a basic dreamweaver template im working on but i cant figure out how to make it work..
    can someone pleaaaase help me.
    would be greatly appreciated!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello iaaan,
    CSS3 can do rounded corners but it's not widely supported yet. Image based corners are how it's normally done. Have a look at some demos -
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    you can also use jquery:

    http://jquery.malsup.com/corner/
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks guys. still unsure as to how i impliment jquery into my html or css. any hints or tutorials i can look at?
    i really need help on code placement.

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Denmark
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the easiest way to make rounded corners is in css3 using border-radius.

    in html make a div tag with id container.
    Code:
    <div id="container">
    website content goes here.
    </div>
    and in css do.

    Code:
    #container {
    height:600px;
    width:800px;
    margin:0 auto;
    border-radius:10px;
    background-color:red;
    }
    this gives you a red box width rounded corners. homever it's still not supported amongst all browsers.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Using border-radius will give you rounded corners in all popular browsers except for IE8 and earlier.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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