How to Add an Offsetted Outline to a CSS Shape

How to add an offsetted outline to a CSS shape?

Here is an idea based on this previous answer. Simply adjust the different variables to get the result you want:

.box {
  --c:10px; /* the corner */
  --b:3px;  /* border thickness*/
  --o:-10px,-15px; /* offset*/
  --border-color:green;
  --bg-color:red;

  width: 200px;
  height: 100px;
  display:inline-block;
  margin:30px;
  position:relative;
  z-index:0;
}

.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  clip-path: polygon(var(--c) 0%, calc(100% - var(--c)) 0%, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0% calc(100% - var(--c)), 0% var(--c));
  background:var(--bg-color);
}

.box:after {
  --grad:transparent 49.5%,var(--border-color) 50%;
  background: 
    linear-gradient(to top right   ,var(--grad)) top    right,
    linear-gradient(to top left    ,var(--grad)) top    left,
    linear-gradient(to bottom right,var(--grad)) bottom right,
    linear-gradient(to bottom left ,var(--grad)) bottom left;
  background-size:calc(var(--c) - var(--b)) calc(var(--c) - var(--b));
  background-repeat:no-repeat;
  border: var(--b) solid var(--border-color);
  transform:translate(var(--o));
}

<div class='box'></div>

<div class='box' style="--c:40px;--b:2px;--o:10px,-20px;--border-color:blue;--bg-color:orange"></div>

Set offset shape as background on title

Move the shape inside your text div then adjust to to the top and left.

Minor adjustments are probably necessary for perfect alignment.

.shape {
  position: absolute;
  width: auto;
  height: 30px;
  min-height: 30px;
  min-width: 30px;
  border-radius: 10px;
  background-color: rgb(25, 94, 76);
  z-index: -1;
  top: 0;
  left: 0;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  font-size: 1rem;
}

<div class="center">
  Resize the page to see the shape go off center
  <div class="shape"></div>
</div>

Rounded outline offset in html table

You cannot round the outline, but you can round the corners of the border inside.

The table-cell style does not allow all the styles that a typical div or span tag can have. Nest your cell data in another element and set styling on that.

table {  border: 3px solid orange;}
td {  padding: 0.25em;}
.color {  background-color: rgb(0, 255, 0);  border-radius: 10px; /* around the border */  border: 3px solid red; /* inside the outline, outside the padding */  outline: 3px solid aqua; /* inside the cell, outside the offset/border */  outline-offset: 3px; /* inside the outline, outside the border */  padding: 0.25em; /* inside the border */  margin: 3px; /* inside the cell, outside the outline */}

<table>  <tr>    <td><div class="color">1</div></td>    <td><div class="color">2</div></td>    <td><div class="color">3</div></td>  </tr></table>

How to get a round outline on a round button with css in Safari

You can use this "hack".

INFO: In Brave Browser we got a square too with your snippet;

button {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  background-color: black;
  display: inherit;
  margin:10px 2px;
}

button::after {
  position: absolute;
  top: -10px;
  content: '';
  left: -10px;
  width: 50px;
  height: 50px;
  border: 5px solid black;
  border-radius: 40px;
  background-color: transparent;
  display: inherit;
}

<button></button>

CSS - double/offset border with outer border dashed

I was able to get this effect by utilizing the pseudo-element selector ::before. (::after would work just as well)

Here is a DEMO

Given the element:

<div class="circle"></div>

Apply the following CSS rule:

.circle {
    position: relative;
    float: left;
    border: 2px dotted black; /* This is the outer border (dotted) */
    background-color: white; /* This is the color of the inner border */
    padding: 10px; /* This is the size of the inner border */
    border-radius: 50%;
}

.circle::before {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #6abde7; /* This is the color of the inner circle */
    width: 150px; /* This controls how wide the circle will be. Remember to subtract padding + border */
    height: 150px; /* This controls how tall the circle will be. Remember to subtract padding + border */
    border-radius: 50%;
}

You can adjust a few of the rules above. They are mainly there just to give shape to the circle for the demo. I've commented the ones that control the styles of the circle.

Explanation

You're basically adding an element inside of the container element via CSS. This won't work on elements that don't support content. (i. e. <input>)

CSS - Specific Outline

You can look at gradients, background-clip and background-size:

example possible http://codepen.io/gc-nomade/pen/aZbrEQ

div {  margin: 1em auto;  width: 600px;  max-width: 70%;  padding: 40px;  /* set offset here for border corners */  background: linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) top right no-repeat, linear-gradient(white, white) top right no-repeat, linear-gradient(white, white) bottom left no-repeat, linear-gradient(white, white) bottom left no-repeat, linear-gradient(white, white) bottom right no-repeat, linear-gradient(white, white) bottom right no-repeat, rgba(255, 255, 255, 0.15);  /* color receive   background-clip:content-box;   so it is not drawn on padding areas */  background-clip: border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, content-box;  background-size: 2px 60px, 80px 2px;  /* here give length and thickness of border corners */  color: white;}p,h2 {  padding: 1em;  margin:0;}html {  height: 100%;  background: url(http://lorempixel.com/640/480/nature/6);  background-size: cover}body {  min-height: 100%;  background: rgba(0, 0, 0, 0.5);  margin: 0;  padding: 4em;}

<div>  <h2>title</h2>  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,    facilisis luctus, metus</p></div>

CSS outline is appearing on unexpected places

If you check the chrome dev tools, the outline is not a simple 1px outline but shows up as

:focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 5px;
}

input:focus, textarea:focus, keygen:focus, select:focus {
    outline-offset: -2px;
}

The outline-offset is what you where looking for. To have a red outline simply add this to your style sheet:

:focus {
     outline-color: #f00;
}

If you also want it on other elements use:

.element:focus {
    outline-color: #f00;
    outline-style: auto;
    outline-width: 5px;
    outline-offset: -2px;
}

Here's a JSFiddle to play with.

---

EDIT:

To have the outline exactly on the border (and not inside of it) you have to set

outline-offset: 0;

to override the chrome user agent styles.

---

Related Topics