How to get rid of a thin gray border of SkinnableContainer in design mode

Question

I'm learning skinning techniques for flex 4 and spark. For an example project I've created custom component derived from SkinnableContainer. It is simple container with surrounding frame and a title.
Everything works just fine when I run test project with a component on it. But at design time my component's border is not visible - it is covered with a thin gray border.
Disadvantages of this behavior is that developer using the component can not see some changes made at design time (e.g. border color).
I've searched through SkinnableContainer's code, but I couldn't find if the thin gray border is drawn by this class.
see illustration
My component's code:
package dtg.components
    import dtg.skins.BorderContainerWithTitleSkin;
    import spark.components.SkinnableContainer;
    public class BorderContainerWithTitle extends SkinnableContainer
        [SkinPart]
        public var title:Label;
        private var _text:String;
        public function BorderContainerWithTitle()
            super();
            setStyle("skinClass", dtg.skins.BorderContainerWithTitleSkin);
        [Inspectable(category="Common",name="Group_Title",type="String",defaultValue="Data Group")]
        public function get groupTitle():String
            return _text;
        public function set groupTitle(text:String):void
            if (_text != text)
                _text = text;
                if (title != null)
                    title.text = _text;
        [Bindable]
        [Inspectable(category="Common", type="Color",format="Color")]
        public var lineColor:uint;
        [Bindable]
        [Inspectable(category="Common", type="Color",format="Color")]
        public var textColor:uint;
        override protected function partAdded(partName:String, instance:Object):void
            super.partAdded(partName, instance);
            if (partName == "title")
                (instance as Label).text = _text;
        override protected function partRemoved(partName:String, instance:Object):void
            super.partRemoved(partName, instance);
and skin:
<?xml version="1.0" encoding="utf-8"?>
<!--- The default skin class for a Spark SkinnableContainer container. 
     @see spark.components.SkinnableContainer
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5"
    creationComplete="skin1_creationCompleteHandler(event)" xmlns:local="*" xmlns:components="dtg.components.*"
    >
    <fx:Metadata>[HostComponent("dtg.components.BorderContainerWithTitle")]</fx:Metadata>
    <fx:Script fb:purpose="styling">
        <![CDATA[        
            import mx.states.OverrideBase;
             *  @private
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["background", "title"];       
             * @private
            override public function get colorizeExclusions():Array {return exclusions;}           
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                    background.visible = false;
                else
                    background.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                super.updateDisplayList(unscaledWidth, unscaledHeight);
        ]]>       
    </fx:Script>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;        
            [Bindable]
            private var _bMargin:uint;
            [Bindable]
            private var _titleWidth:uint;          
            protected function skin1_creationCompleteHandler(event:FlexEvent):void
                _titleWidth = title.width;
                _bMargin = title.height/2;
                title.addEventListener(Event.CHANGE, onTitleChange);
            protected function updateLayout():void
                var tlm:TextLineMetrics = title.measureText(title.text);
                _titleWidth = tlm.width;
                _bMargin = (tlm.ascent)/2;
            protected function onTitleChange(e:Event):void
                updateLayout();
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:SolidColorStroke id="lineStroke" weight="1" color="{hostComponent.lineColor}" alpha="1.0"/>
    </fx:Declarations>
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" />
    </s:states>
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill"/>
        </s:fill>
    </s:Rect>
    <!--
    Note: setting the minimum size to 0 here so that changes to the host component's
    size will not be thwarted by this skin part's minimum size.   This is a compromise,
    more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="1" right="1" top="1" bottom="1" minWidth="0" minHeight="0">
    </s:Group> 
    <s:Label id="title"
                 left="{_bMargin*2}"
                 top="{-_bMargin}"
                 color="{hostComponent.textColor}"
                 />    
    <!--Top left line-->
    <s:Line xFrom="0" yFrom="0" xTo="{_bMargin}" yTo="0" stroke="{lineStroke}"/>
    <!--Top rigth line-->
    <s:Line xFrom="{_titleWidth + _bMargin*3}" yFrom="0" xTo="{width-1}" yTo="0" stroke="{lineStroke}"/>
    <!--Rigth line-->
    <s:Line xFrom="{width-1}" yFrom="0" xTo="{width-1}" yTo="{height-1}" stroke="{lineStroke}"/>
    <!--Bottom line-->
    <s:Line xFrom="{width-1}" yFrom="{height-1}" xTo="0" yTo="{height-1}" stroke="{lineStroke}"/>
    <!--Left line-->
    <s:Line xFrom="0" yFrom="{height-1}" xTo="0" yTo="0" stroke="{lineStroke}"/>
</s:SparkSkin>

Answer 1

This appears to be a Flex question. Please try the Flex forums here
http://forums.adobe.com/community/flex/flex_general_discussion.