Skip navigation
Currently Being Moderated

How to:Rounded text box with colour fill in dreamweaver?

Jun 15, 2012 1:50 AM

Curious if this can be done, a rounded text box with a colour fill in dreamweaver. I would also like the option of keeping or deleting the border

 
Replies
  • Currently Being Moderated
    Jun 15, 2012 2:02 AM   in reply to LS8 9KN

    Use css? Do you have some knowledge of how to deploy it?

     

    #roundedBox {

    width: 500px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    -khtml-border-radius: 10px;

    border-radius: 10px;

    background-color:#CF9;

    border: 1px solid #990;

    }

     

    <div id="roundedBox">

    <p>This box has rounded corners</p>

    <p>This box has rounded corners</p>

    <p>This box has rounded corners</p>

    <p>This box has rounded corners</p>

    </div>

     

    The above will work in all modern browsers and versions of IE9 upwards.

     

    If you need to support less than IE9 you will have to use another techinque to address the issue like 'curvycorners' or just let the website degarded gracefully in older browsers.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 4:17 AM   in reply to LS8 9KN

    LS8 9KN wrote:

     

    Thanks for the code but what is the curvycorners technique? Is this something using html5?

    No 'curvey corners' http://www.curvycorners.net/ is used to support older versions of IE, 6,7 and 8. Support for rounded corners in IE was only made possible when IE9 appeared on the scene.

     

    Primarily you should use the method I detailed above and then IF you want to support IE6, 7 and 8 think about using curvey corners.

     

    Of course you could always use images to created the rounded corners too!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 5:40 AM   in reply to LS8 9KN

    If you want the corners to work in every version of IE then there is no alternative other than to use images.

     

    You say the css doesnt work in your version of Firefox? what version is that?

     

    Can you provide the url link to where you sourced the above code?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 7:20 AM   in reply to LS8 9KN

    What site?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 7:35 AM   in reply to LS8 9KN

    LS8 9KN wrote:

     

    http://cssround.com/

     

     

    Yes, its more or less the same as the example that I provided in my initial response above. It still won't work in any IE browsers which are older than version 9 though.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 8:27 AM   in reply to LS8 9KN

    LS8 9KN wrote:

     

    Was wondering how to position the box on the page so I can drag and position and also how to overlay different boxes to create a design pattern?

     

    It sounds as though you are treating this project like you would a DTP project which is completely the wrong way.

     

    There is no easy way to do ths succesfully unless you know some html and css.

     

    You can insert absolutely positioned <divs> - Insert> Layout Objects> AP Div and drag them around all day but I would not advise it as a method to layout a page because of their limitations.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2012 12:37 PM   in reply to LS8 9KN

    See near bottom how to use a file called PIE.htc to get rounded corners in older versions of IE

    http://forums.adobe.com/message/4460760#4460760

     

    Download the file called PIE.htc

    http://css3pie.com/documentation/getting-started/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2012 1:31 PM   in reply to LS8 9KN

    @David

    The HTC workarounds for older IE browsers do have some notable side effects. #1 the removal of Clear Type which makes fonts look horrible in browsers.  #2 HTC workarounds don't work well on complex layouts or when different border radii values are used in the 4 corners. 

     

    @LS8,

    You have decide for yourself if it's worth extra effort to support older browsers for the sake of "eye candy."  While rounded borders look nice, having them doesn't make your site perform better.  Ultimately, performance is what counts; not rounded borders.

     

    just my 2 cents...

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points