7 Replies Latest reply on May 11, 2011 2:12 AM by Harxy

    CSS curved borders

    Harxy

      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

        • 1. Re: CSS curved borders
          Harxy Level 1

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

           

          moz-border-radius: 15px;

          border-radius: 15px;

           

          cheers,

          • 2. Re: CSS curved borders
            Willam van Weelden Adobe Community Professional & MVP

            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

            • 3. Re: CSS curved borders
              Harxy Level 1

              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

              • 4. Re: CSS curved borders
                Willam van Weelden Adobe Community Professional & MVP

                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

                1 person found this helpful
                • 5. Re: CSS curved borders
                  Harxy Level 1

                  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...

                  • 6. Re: CSS curved borders
                    Willam van Weelden Adobe Community Professional & MVP

                    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

                    • 7. Re: CSS curved borders
                      Harxy Level 1

                      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