7 Replies Latest reply on Jul 10, 2010 5:49 AM by Ivan Latysh

    stroke only one side


      Hello i would like to do one-side border around to iteam.

      I cant find out any property in flex/as reference how to apply stroke only to one side of element.


      would be glad to hear any tip from you,




        • 1. Re: stroke only one side
          BhaskerChari Level 4

          Hi beynar,


          You can use the borderSides property to specify the border sides...as shown below:


          <mx:Canvas width="400" height="400" borderSides="[left,right,top,bottom]" />


          <mx:Canvas width="400" height="400" borderSides="[left,right,top]" />


          <mx:Canvas width="400" height="400" borderSides="[left,right]" />


          <mx:Canvas width="400" height="400" borderSides="[left,right]" />


          You can apply borders to any of the one side...


          If this post answers your question or helps, please kindly mark it as such.


          Bhasker Chari

          • 2. Re: stroke only one side
            beynar Level 1

            Thanks for replay @BhaskerChari

            Well I put this code in my mxml file and fb output this error:

            The style 'borderSides' is only supported by type 'mx.containers.Canvas' with the theme(s) 'halo'.

            I'm using Flex SDK 4

            also code assist didn't propose suggest like 'borderSides'


            looking forward to yours replay.

            • 3. Re: stroke only one side
              beynar Level 1

              Nobody know how to solve it?

              • 4. Re: stroke only one side
                FTQuest Level 3

                There are various possibilities.

                For examples you can try either s:Line or s:Path - both would give you plenty of flexibility.


                • 5. Re: stroke only one side
                  Ivan Latysh

                  Looks like you are using Flex 4.


                  If it is the case, try the following:

                  .VBoxBorder {

                    borderSkin: ClassReference("mx.skins.halo.HaloBorder");
                    borderStyle: solid;
                    borderSides: "right bottom";



                  The trick is to set proper border skin, doc's are lying, halo skin is not the default skin, you have to set it explicitly.

                  And yes, flex doc's are extremely poorly written.


                  Hope this helps.

                  • 6. Re: stroke only one side
                    beynar Level 1

                    Thank you @FTQuest your solution works.

                    @Ivan Latysh i apply this css for BorderContainer and border apper for each one side instead of right and bottom

                    • 7. Re: stroke only one side
                      Ivan Latysh Level 1

                      BorderContainer is a part of Spark components, this css is for Halo component that is compiled with Flex 4.

                      I am glad that you have found the solution.