CSS Outline Left and Right

css outline left and right

You could possibly achieve this using two box shadows:

div {  margin: 10px;  padding: 10px;  width: 100px;  height: 10px;  box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;}

<div></div>

outline on only one border

Outline indeed does apply to the whole element.

Now that I see your image, here's how to achieve it.

.element {  padding: 5px 0;  background: #CCC;}.element:before {  content: "\a0";  display: block;  padding: 2px 0;  line-height: 1px;  border-top: 1px dashed #000; }.element p {  padding: 0 10px;}

<div class="element">  <p>Some content comes here...</p></div>

CSS, outline-offset: setting the offset for each side individually

Use a pseudo element and you can easily control space and size using border:

.outline {  padding: 10px;  display: inline-block;  position:relative;  margin:20px;  background:rgba(0,0,0,.2);}.outline:before {  content:"";  position:absolute;  left:-10px;  right:-20px;  top:-5px;  bottom:-5px;  border:2px solid;  border-right-width:4px;  border-left-width:5px;}

<div class="outline">  Content</div>

Css: How to format and remove outlining borders of table on left and right side?

You can modify the css of the selected rows.

This will be your default css (which set the borders)

.hoverTable tr{
    background: #ffffff;
    border-bottom: 1px solid black;
    border-top:1px solid black;
}

This will be your css on hover

.hoverTable tr:not(:nth-child(1)):hover {
    border-left:5px solid black;
}

I have added an id for the top and bottom rows called notop and last

Updated HTML:

  <tr id = "notop">
  <td  class="blankcell"></td>
    <td id="check">Image</td>
    <td>Image</td> 
    <td>Image</td>
  </tr>

<tr  id = "last">
  <td class="rowTitle">TITLE</td>
    <td>✔</td>
    <td>✔</td> 
    <td>✔</td>
  </tr>

CSS for the top and bottom rows

#notop{
    border:0px;
}
#last{
    border-bottom:0px;
}

Check out the working fiddle:http://jsfiddle.net/2o144n92/

How to make CSS outline cornered?

Don't use border for this, use skew transformation:

.box {
  overflow: hidden;
  width: 40%;
  margin-left: auto;
}

.box::before {
  content: "";
  display: block;
  margin-right: -10px;
  height: 150px;
  background: #000 content-box;
  padding: 5px;
  border: 4px solid orange;
  transform-origin: top;
  transform: skewX(30deg);
}

<div class="box">

</div>

---

Related Topics