How to Create a Border That Fully Covers the Adjacent Corners in CSS

How to create a border that fully covers the adjacent corners in CSS?

You could draw these with inset shadows and padding :

div {

  padding:12px 5px 5px;

  width: 40%;

  height: 200px;

  box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px  gray

}

<div></div>

Smart way to add corner image to DIV border on all four corners

For a solution that's widely compatible, I think you should use four elements with position: absolute combined with position: relative and negative offsets:

See: http://jsfiddle.net/M4TC5/

@meo's demo using transform: http://jsfiddle.net/M4TC5/2/

(and my demo: http://jsfiddle.net/M4TC5/1/)

That really just shows the concept, you can generate better transform code (that doesn't look slightly "off" in IE) with this tool: http://www.useragentman.com/IETransformsTranslator/

HTML:

<div class="image">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
    <img src="???" />
</div>

CSS:

.image {
    position: relative
}
.corner {
    position: absolute;
    background: url(???);
}
.TL {
    top: -10px;
    left: -10px
}
.TR {
    top: -10px;
    right: -10px
}
.BL {
    bottom: -10px;
    left: -10px
}
.BR {
    bottom: -10px;
    right: -10px
}

Css to create a bottom border that does not extend the length of the entire div

I do not think u can style a section of a div however you certainly can use a

tage to get the job done

 body {

    margin: 100px;

}

    .my-styled-div {

        text-align: center;

        /*padding-bottom: 10px;  remove this*/

        border-right: 1px solid #848484;

        /*border-bottom: 1px solid #848484;  also remove this */

    }

.hr-fix{

    margin-bottom: 0;

    margin-top: 10px;

    margin-left: 25px;/*  << you can specify how far from the left you want the line to be */

    border: 0;

    border-bottom: 1px solid #848484; /* you may match this border with the right border of the <div>*/

    

}

<div class="row col-md-4">

        <div class="my-styled-div">

            div1

            <hr class="hr-fix" />

        </div>

    </div>

    <div class="row col-md-4">

        <div class="my-styled-div">

            div2

             <hr class="hr-fix" />

        </div>

    </div>

    <div class="row col-md-4">

        <div class="my-styled-div">

            div3

            <hr class="hr-fix" />

        </div>

    </div>

set css border to end in a 90 instead of a 45 degree angle

Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)

In order to simulate a butt joint, you can stack two divs to get a simulated result:

div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100px;
  width: 100px;
}

<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>

Preventing double borders in CSS

#divNumberOne { border-right: 0; }

Using CSS to make table's outer border color different from cells' border color

I would acheive this by using adjacent selectors, like so:

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.

This won't of course work in IE6 as it doesn't understand the adjacent selectors.

http://jsfiddle.net/JaF5h/36/

Putting css borders around radio buttons

You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I do not waive confidentiality

How to Create a Border That Fully Covers the Adjacent Corners in CSS