CSS [RESOLVED] Issues with "border-radius"
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 5 of 5

Thread: [RESOLVED] Issues with "border-radius"

Hybrid View

  1. #1
    Join Date
    Nov 2012
    Posts
    4

    [RESOLVED] Issues with "border-radius"

    Hello there everyone, just a quick introduction before I get onto my problem.

    My name is Lucas, I am a school student undertaking a distance education IT course and currently we are studying PHP and HTML. I have decided to take learning CSS into my own hands so that I may make websites which aren't the horrible generic Black Text on Simple coloured background with Times new Roman font.

    To the issue at hand; the "border-radius" element is not functioning as intended. Disregard the clash between the text effect and the black background.

    Name:  CSS Issue.png
Views: 88
Size:  7.1 KB

    So basically what is happening here is it is placing the "border" on each separate line, whereas what I intended for the element to do was surround a couple of paragraphs.

    Any idea how I may be able to do this? The style code used for this is:

    Code:
    -moz-border-radius-topleft: 50px;
    -webkit-border-top-left-radius: 50px;
    border-top-left-radius: 50px;
    -moz-border-radius-topright: 50px;
    -webkit-border-top-right-radius: 50px;
    border-top-right-radius: 50px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-border-radius-bottomleft: 35px;
    -webkit-border-bottom-left-radius: 35px;
    border-bottom-left-radius: 35px;
    However the exact same problem happens with:
    Code:
    border-radius: 50px;
    Perhaps I am using the wrong element? I am still a noob at coding, so all help and tips are appreciated even if they only hold little relevance to the issue at hand.

    Thank you!

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,840

    Re: Issues with "border-radius"

    First off, why don't you just use shorthand? It will save you so many bytes! And, you don't need -moz, -o, or -webkit since all modern browsers support border-radius.

    Code:
    border-radius: 50px 50px 8px 35px;
    Second, I bet you've styled a <span> tag instead of wrapping the whole thing in a <div>.
    Last edited by PeejAvery; November 12th, 2012 at 11:09 PM.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Nov 2012
    Posts
    4

    Thumbs up Re: Issues with "border-radius"

    Haha, thank you for answering my most basic of questions!
    And I believe you are correct there, I'll use div tags.

    I've learned quite a bit from your single post

    I'd like to leave the thread open for a little bit longer should I have a related question if that's okay?

  4. #4
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,840

    Re: Issues with "border-radius"

    Typically we like to keep each thread it's own question. It really helps with organization!
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    Nov 2012
    Posts
    4

    Re: Issues with "border-radius"

    Ah, fair enough. I shall mark this resolved then and proceed henceforth to post each question unto its own topic.


Posting Permissions

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


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center