CSS Border on Three Sides

CSS Border on three sides

border: 1px solid green;
border-top: 0;

Two different width borders on 3 sides

Why not remove the outline and instead create a nested element inside of the element?

You can do like this:

Create nested elements in HTML:

<div class="big">
        <div class="small">Some text Here.....</div>
</div>

Then apply CSS:

.big{
      border: 5px solid green;
      border-bottom: none;
    }
.small{
        border: 2px solid black;
        border-bottom: none;
        margin: 2px;
    }

No need to use the outline.

I want to make border around three sides of AnchorPane, not four

Try:

 pane.setStyle("-fx-border-color: green; -fx-border-width: 1px 1px 1px 0px");

Design in css rounded border in three sides and one with disconnected corner

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><style>    .upperdiv {        width: 200px;        height: 80px;        border: 1px solid;        border-radius: 25px;        border-bottom-left-radius: 0;        border-bottom-right-radius: 0;    }
    .upperdiv::before {        position: absolute;        padding: 2em;        border-radius: 50%;        content: '';        background: white;    }
    .TL::before {        margin: -28px;        padding: 2em;    }
    .TR::before {        margin: -28px;        margin-left: 167px;    }
    .lowerdiv {        width: 200px;        height: 80px;        border: 1px solid;        border-radius: 25px;        border-top: 0px solid;        border-top-left-radius: 0;        border-top-right-radius: 0;    }
    .lowerdiv::before {        position: absolute;        padding: 2em;        border-radius: 50%;        content: '';        background: white;    }
    .BR::before {        margin: -28px;        margin-top: 45px;        margin-left: 167px;    }
    .BL::before {        margin: -28px;        margin-top: 45px;        margin-left: -33px;    }
    .container {        margin: 3em;        display: inline-block;    }</style>
<body>    <div class="container">        <div class="upperdiv TL"></div>        <div class="lowerdiv"></div>    </div>
    <div class="container">        <div class="upperdiv TR"></div>        <div class="lowerdiv"></div>    </div>
    <div class="container">        <div class="upperdiv"></div>        <div class="lowerdiv BR"></div>    </div>
    <div class="container">        <div class="upperdiv"></div>        <div class="lowerdiv BL"></div>    </div></body>
</html>

Adding a glow to 3 sides using CSS

You can do it with css :after property. Like this:

div{
    width:100px;
    height:30px;
    -moz-box-shadow: 0 -1px 15px #80abc6;
    -webkit-box-shadow: 0 -1px 15px #80abc6;
    box-shadow: 0 -1px 15px #80abc6;
    margin:30px;
    position:relative;
}
div:after{
    content:'';
    width:10px;
    height:100%;
    background:#fff;
    position:absolute;
    top:0;
    left:-10px;
}

Check this http://jsfiddle.net/QBQJn/1/

Thin CSS borders on 3 sides bleed into a thick border on the other side

for me, this looks like it works exactly like it shoud - set your border-width to 10px for all sides and 30px for the top-border to see this more clearly: http://jsfiddle.net/AzHUt/21/

if you want this to look like a "window" with an bold bar on the top, you'll need another markup ("div soup" like you said).

EDIT: i think this is what you've expected: http://jsfiddle.net/AzHUt/28/ - it's just a little change in the markup, adding another div to it (ugly, but it does the job)

CSS Border Shorthand for everything except top

CSS

border: solid 1px #CCC;
border-top: none;

Border on three sides

Yes:

<Border BorderThickness="1 1 1 0" BorderBrush="Black"/>

Same as goes for Margin, Padding etc.

How to set a border for an HTML div tag

Try being explicit about all the border properties. For example:

border:1px solid black;

See Border shorthand property. Although the other bits are optional some browsers don't set the width or colour to a default you'd expect. In your case I'd bet that it's the width that's zero unless specified.

CSS Border on Three Sides