Skip to main content
A
Anonymous
May 10, 2011
Question

CSS curved borders

  • May 10, 2011
  • 4 replies
  • 1018 views

Can anyone see why this isn't working?

I have just added border radiuses (radii?) to the default stylesheet using notepad:

p.Img {

border-left-style: Solid;

border-right-style: Solid;

border-top-style: Solid;

border-bottom-style: Solid;

border-left-color: #adadad;

border-right-color: #adadad;

border-top-color: #adadad;

border-bottom-color: #adadad;

moz-border-radius: 15px;

border-radius: 15px;

padding-left: 2px;

padding-right: 2px;

padding-top: 2px;

padding-bottom: 2px;

border-left-width: 7px;

border-right-width: 7px;

border-top-width: 7px;

border-bottom-width: 7px;

}

But my borders remain stubbornly unrounded - anyone any ideas?

Thanks

    This topic has been closed for replies.

    4 replies

    Willam van Weelden
    Willam van Weelden
    Inspiring
    May 10, 2011

    No surprise that RoboHelp doesn't show it. Try generating your output and see if your styles are correct in your output.

    Also, I doubt that your curved borders will show if you create HTML Help output.

    Greet,

    Willam

    A
    Anonymous
    May 11, 2011

    William has figured out the issue via email, I'll post it here in case it comes up again for anyone...

    As for the borders of the images, RoboHelp automatically disables the borders of images you insert into your topics. You can override this setting in your css with the !important declaration. Try replacing your current style with:

    img {

    border: 7px solid #adadad !important ;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    border-radius: 15px;

    }

    The !important declaration tells the browser that this style is more important than any inline styling or user defined styling. This allows your style sheet to overwrite those RoboHelp inline styles.


    Thanks for all the help,

    Paul

    A
    Anonymous
    May 10, 2011

    Hi - that has helped but now further problems have arisen...

    How do I add an img tag to the css so that Robohelp will pick it up? All I want is an img style that adds a grey, round edged border to my images and it seems to be incredibly tricky!

    At the moment I am using a p.img class in the stylesheet but that is unreliable depending on the size of the image...

    Can anyone help on this?

    Thanks

    Willam van Weelden
    Willam van Weelden
    Inspiring
    May 10, 2011

    Hi,

    You can simply style the image itself. For instance, if you use:

    img {

         -moz-border-radius: 15px;

         -webkit-border-radius: 15px;

         border-radius: 15px;

    }

    you give all images a border radius of 15 pixels. I'd say that you simply take the border styles from your paragraph definition and put them in an image style.

    If you only want to style certain images, create an image class, add the styling for that class and apply the class to the images in HTML mode:

    <img src="myimg.png" class="border" />

    img.border {

         /* Border style here */

    }

    Greet,

    Willam

    A
    Anonymous
    May 10, 2011

    You see, this is what I figured but I just can't get it to work. I add this to my .css file:

    img {

    border-left-style: Solid;

    border-right-style: Solid;

    border-top-style: Solid;

    border-bottom-style: Solid;

    border-left-color: #adadad;

    border-right-color: #adadad;

    border-top-color: #adadad;

    border-bottom-color: #adadad;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    border-radius: 15px;

    padding-left: 2px;

    padding-right: 2px;

    padding-top: 2px;

    padding-bottom: 2px;

    text-align: left;

    margin-left: 0px;

    x-next-class: Caption;

    x-next-type: p;

    margin-right: 0px;

    border-left-width: 7px;

    border-right-width: 7px;

    border-top-width: 7px;

    border-bottom-width: 7px;

    }

    Go back into Robohelp, insert an image, nothing happens. No border at all. Any thoughts?

    Thanks again...

    Willam van Weelden
    Willam van Weelden
    Inspiring
    May 10, 2011

    Hi,

    For Mozilla:

    -moz-border-radius: 15px;

    Include the dash before "moz".

    For Safari/Chrome:

    -webkit-border-radius: 15px;

    For IE9/Opera 10+:

         border-radius: 15px;

    For IE8 and lower: Too bad. They don't support border radius.

    For more information, see http://www.css3.info/preview/rounded-border/

    Greet,

    Willam

    Typo in border-radius

    A
    Anonymous
    May 10, 2011

    Just to be clear, the two lines actually added were:

    moz-border-radius: 15px;

    border-radius: 15px;

    cheers,

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices