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 Rockstar

          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 Newcomer

            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 Newcomer

              Nobody know how to solve it?

              • 4. Re: stroke only one side
                FTQuest Pioneer

                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 Newcomer

                  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 Newcomer

                    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 Newcomer

                      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.