Flex: Hiding the border on a side of a Group...

In flex 4, the style 'boderSides' has been taken out, but there's another way to hide the border of a selected side of a box away. And here's a simple example to give you a rough idea on how to get it done. :)

Source Code for the main application - 'SimpleSelectedBorderExample.mxml'

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      creationComplete="creationCompleteEvent(event)" xmlns:Container="Container.*">
 <fx:Script>
  <![CDATA[
   import Container.SimpleGroup;
   
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvent(e:FlexEvent):void
   {
    var tempBox:SimpleGroup;
    for(var i:int = 0; i < 8; i ++){
     for(var j:int = 0; j < 8; j ++){
      tempBox = new SimpleGroup();
      tempBox.x = i * 50 - 0.5;
      tempBox.y = j * 50 - 0.5;
      container.addElement(tempBox);
     } 
    }
   }
  ]]>
 </fx:Script>
 <s:BorderContainer width="100%"
        height="100%" 
        borderVisible="false">
  <s:layout>
   <s:VerticalLayout verticalAlign="middle"
         horizontalAlign="center"/>
  </s:layout>
  <!-- All the boxes will appear inside this container -->
  <s:BorderContainer width="400"
         height="400"
         id="container"
         borderVisible="false"/>
 </s:BorderContainer>      
</s:Application>

Source Code for the Group Class that we are using to repeat the pattern - 'SimpleGroup.mxml'

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" 
   width="50" 
   height="50" 
   creationComplete="creationCompleteEvent(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   //Are we going to show the left border?
   [Bindable]
   private var _boolLeft:Boolean = false;
   
   //Are we going to show the right border?
   [Bindable]
   private var _boolRight:Boolean = false;
   
   //Are we going to show the top border?
   [Bindable]
   private var _boolTop:Boolean = false;
   
   //Are we going to show the bottom border?
   [Bindable]
   private var _boolBottom:Boolean = false;
   
   //-1 = border is outside the box
   //-0.5 = border is in the middle
   //0 = border is inside the box
   [Bindable]
   private var _typeValue:Number = 0;
   
   //Thickness of the border
   [Bindable]
   private var _borderThickness:Number = 0;
   
   //Color of the border
   [Bindable]
   private var _borderColor:uint = 0x333333;
   
   protected function creationCompleteEvent(e:FlexEvent):void
   {
    //Randomized the showing and hiding of the borders 
    var rand:Number = Math.round(Math.random());
    if(rand == 1){
     _boolLeft = true;
    }
    rand = Math.round(Math.random());
    if(rand == 1){
     _boolRight = true;
    }
    rand = Math.round(Math.random());
    if(rand == 1){
     _boolTop = true;
    }
    rand = Math.round(Math.random());
    if(rand == 1){
     _boolBottom = true;
    }
    
    _typeValue = Math.round(Math.random() * 2);
    if(_typeValue == 1){
     _typeValue = -0.5;
    }else if(_typeValue == 2){
     _typeValue = -1;
    }
    
    _borderThickness = Math.round(Math.random() * 2) + 1;
    
    _typeValue = _typeValue * _borderThickness;
   }
  ]]>
 </fx:Script>
 <!-- Left -->
 <s:Line left="{_typeValue}"
   top="{_typeValue}"
   bottom="{_typeValue}" 
   visible="{_boolLeft}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
         color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
 <!-- Bottom -->
 <s:Line left="{_typeValue}"
   right="{_typeValue}"
   bottom="{_typeValue}"
   visible="{_boolBottom}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
        color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
 <!-- Right -->
 <s:Line right="{_typeValue}"
   top="{_typeValue}"
   bottom="{_typeValue}"
   visible="{_boolRight}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
        color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
 <!-- Top -->
 <s:Line left="{_typeValue}"
   right="{_typeValue}"
   top="{_typeValue}"
   visible="{_boolTop}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
        color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
</s:Group>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.