CSS Outside Border

CSS Outside Border

I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.

Look at the simple example below in your browser:

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

Is it possible to add border outside the margin using CSS?

You won't be able to do this with just the element's box since a box is defined by its border edge, not its margin edge, and having borders outside an element's margin edge would interfere with margin collapse.

You could cheat by creating a pseudo-element with your desired border, but IMO it's more trouble than it's worth. The element itself needs to have a margin value equal to your intended margin amount plus your desired border width, and the pseudo-element needs to be absolutely positioned with the element as its containing block, and extend out of the box by this sum (assuming you don't want the border to eat into the margins):

html {    background-color: #fff;}
body {    float: left;    background-color: #ccc;}
div {    position: relative;    width: 100px;    height: 100px;    background-color: #ff0;    margin: 30px;}
div::before {    content: '';    position: absolute;    top: -30px;    right: -30px;    bottom: -30px;    left: -30px;    border: 5px solid #f00;}

<div></div>

CSS Border/Outline With Outside Padding

outline-offset is not supported in Internet Explorer.

You could use a combination of outline and border to achieve the same effect.

Here border is used for the silver line and outline is used for the white space surrounding the element.

body {  background: #fffacf;  padding: 15px;}
.articleQuote {  background-color: #FFFFFF;  font-family: 'PT Sans', sans-serif;  font-size: 20px;  color: navy;  padding: 25px 25px 25px 25px;  outline-style: solid;  outline-color: white;  outline-width: 10px;  text-align: center;  border: 1px solid silver;}

<div class="articleQuote">  "80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."</div>

How to add a border outside of element with ::before selector?

What about the following? You can use a wrapper and add your content inside of a span which is centered.

.wrapper {  display: flex;  align-items: center;  position: relative;  cursor: pointer;  padding: 12px 12px 12px 40px;}
.wrapper::before {  content: '';  left: 0;  width: 10px;  height: 100%;  opacity: 0;  background: lightblue;  position: absolute;  transition: 0.5s all ease;  border-top-right-radius:10px;  border-bottom-right-radius:10px;}
.wrapper:hover::before {  opacity: 1; }

<div class="wrapper">  <span>This is a text</span></div><div class="wrapper">  <span>This is a second text</span></div><div class="wrapper">  <span>This is another</span></div>

Border effect outside the element

Borders cannot be set to blur (at least directly). If you are using some sort of CSS library, say Bootstrap then it may be adding box-shadow to the input elements.

Setting the box-shadow: none; on the required input should solve the problem.

HTML border only outside the table

You need to add the property border:1px solid red to your table

<table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;border:1px red solid;">  <tbody>    <tr>      <td>aasda</td>      <td>asfasf<a title="Ep. 1 Sono Reika"> </a></td>      <td width="60%">asfasfasfasf</td>      <td>blabla</td>    </tr>    <tr>      <td>saf</td>      <td><a title="Ep. 2 La grazia"> </a>asf</td>      <td width='"70%'>asf</td>      <td rowspan="9" width="30%">        <p>blabla</p>        <p>blalbalbalalb</p>      </td>    </tr>    <tr>      <td>asf</td>      <td><a title="Ep. 2 La grazia"> </a>asf</td>      <td>asf</td>    </tr>    <tr>      <td>asf</td>      <td><a title="Ep. 2 La grazia"> </a>asf</td>      <td width='"70%'>asf</td>    </tr>  </tbody></table><p></p>

Is there a way to have CSS borders outside the box(div)? Or alternative solution

Looks like a margin issue, trying changing the margin to padding, should work almost exactly the same and go to the edge.

EDIT Or set the width of the out div to be the same as the inner div.

CSS border overflowing outside div

Remove the padding form your styles padding: 0px 107px; and padding-right: 26%;. Instead of this you can use text-align:center and make it center of the td. Also apply width:100% for your table and divide equally for each td. This is optional. If you want some td need to big and some td need to small, you can decide and apply based on that for your td's in a percentage. So that any screen it will calculate accordingly. I have modified and added the following styles.

 .show-info table {
    width:100%;
 }
 .show-info th, td {
    white-space: nowrap;
    border-bottom: 1px solid white;
    overflow: visible;
    color: white;
    width:33%;
   /*padding: 0px 107px;
   max-width: 158px;*/
   min-width: 104px;
   /*padding-right: 26%;*/
   padding-bottom: 5px;
   text-align:center;
   border-right: 1px solid white;
  /* margin: 0 auto; */
}

The same above I have added in the following snippet.

#title {  font-size: 25px;  color: #05c46b;  text-decoration: none;  float: left;  text-shadow: 3px 3px 3px black;  margin: 30px 0px 0px 20px;}
#title:hover {  color: rgb(5,196,107);}
.button {  float: right;}
.content {  margin-top: 20px;  color: white;  background: linear-gradient(#1e272e, #485460);}
.show-info table {  width:100%;}.show-info th, td {  white-space: nowrap;  border-bottom: 1px solid white;  overflow: visible;  color: white;  width:33%;  /*padding: 0px 107px;*/  /*max-width: 158px;*/  min-width: 104px;  /*padding-right: 26%;*/  padding-bottom: 5px;  text-align:center;  border-right: 1px solid white;  /* margin: 0 auto; */
}
.show-info th:last-child, td:last-child {  border-right: none;}
.airing {  background-color:#44bd32;}

<div class="content">    <div class="show-info">      <table>        <thead>          <tr>            <th>Show Name</th>            <th>Season | Episode</th>            <th>Days Until Release</th>          </tr>        </thead>        <tbody>                    <tr>            <td>Test</td>            <td>1 Mar. 2018 </td>            <td>14 days left f(1 Mar. 2018)</td>                      </tr>                  </tbody>
      </table>

CSS circles - outer border with white space on inside of element

Use background-clip: content-box; so your background fills the content area only and set padding as a size of white space.

See the snippet below:

.status {  display: block;  width: 8em;  height: 8em;  border-radius: 100%;  background-color: #2ed091;  margin: 5px;  border: 1px solid black;    background-clip: content-box;  padding: 1em;}

<span class="status"></span>

---

Related Topics