CSS Double Border with Outer Border Thicker Than Inner Border

CSS Double Border with outer border thicker than inner border

Outlines are included in the CSS3 specification and allow both a border and an outline to be applied to a single element.

The outline property is identical to the border command. The additional offset property however allows the border to be moved further inside or outside of the element.

I used outlines to give borders 2 different colors, change the code to give your borders 2 different sizes.

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}

How to make double border on left only with thick outside and thin inside

I think this is what you are looking for..

.border1{  width:100px;  height:100px;  border-left: 10px solid #ccc;  }.border2{ width: 100px; height: 100px; display: block; margin-left: 15px; border-left: 3px solid #ccc;  }

<div class="border1">  <div class="border2"></div></div>

space between double borders

You can use box-shadow for making illusion of two borders around the element

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  padding: 8%;
  box-shadow: 0 0 0 1px #B38D6A, 0 0 0 5px #fff, 0 0 0 6px #B38D6A, 0 0 0 11px #fff;
}

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

Thicker interior borders compared to outer border

Here's what I have:

body {
    margin: 10px;
}
ul {
    list-style: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-bottom: 0;
    border-right: 0;
}
ul:after {
    content: "";
    display: table;
    height: 0;
}

li {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    float: left;
    width: 50%;
}

/* Styles for Menu Items */
ul li a {
    text-decoration: none;
    color: #777;
    padding: 5px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

li > a {
    display: block;
}

ul li a:hover {
    color: #E2144A;
    background: #f9f9f9;
}

/* Hover Styles */
li ul li a {
    padding: 2px 5px;
}

/* Sub Menu Styles */

Some points:

Please indent code properly, for yours and ours sake.
What I did is set a left and bottom border on the a elements, and a top and left border on the ul element. This makes a consistent 1px border.
I use clearfix to give the ul height with the floated elements.
I use box-sizing: border-box to make it so that when I set width: 50%, it'll be 50%, including padding and border (not margin).

CSS - border-bottom double 1 thick 1 thin

Something like below??

You can use outline

Outlines allow both a border and an outline to be applied to a single element.

FIDDLE DEMO

<div class="border"></div>

CSS

.border {
    border: 1px double #000;
    outline: 5px solid #699;
    outline-offset: -9px;
    width:200px;
    height:200px;
}

How do I achieve a thick border with inner border radius only

the simple way: you can have 2 dives 

<div class="a">
   <div class="b">
   </div>
</div>

.b{
    display: block;
    width: 50px;
    height: 50px;
    background-color: yellow;
    border-radius: 5px;
}
 .a{
    border: 15px solid;
    width: auto;
    height: auto;
    display: inline-block;
    background-color: black;
}

Is there is a possible way to fill color between css double border?

You could also use multiple box-shadows:

#element {  width: 100px;  height: 100px;  box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;}

<div id="element"></div>

In WPF, how to set an outer, centered, and inner border?

So to re-create your example, here's quickie concept example alternatives. However there's a bunch of different ways you can accomplish the same effects but here's at least a few...

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="Border">
            <Setter Property="BorderBrush" Value="#570000FF"/>
            <Setter Property="BorderThickness" Value="10"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Margin" Value="10"/>
        </Style>
        <Style TargetType="Rectangle">
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="StrokeThickness" Value="1"/>
        </Style>
    </StackPanel.Resources>

    <Border>
        <Rectangle/>
    </Border>

    <Border>
        <Rectangle Margin="-5"/>
    </Border>

    <Border BorderBrush="Black" BorderThickness="1">
        <Rectangle Stroke="#570000FF" StrokeThickness="10"/>
    </Border>

</StackPanel>

Result:

Sample Image

Hope this helps, cheers.

CSS Double Border with Outer Border Thicker Than Inner Border