CSS Border Rotation

CSS - Rotate border - is it possible?

In example below i have used pseudo element by positioning absolute and added border left with skew so that it adjusts to the parent height

.slant-box {
    .slant-box-content {
        display: inline-block;
        position: relative;
        padding:15px;
        margin:20px;
    }

    &:before {
        content: '';
        position:absolute;
        width:100%;
        height:100%;
        border-color: transparent transparent transparent red;
        border-style:solid;
        border-width:2px;
        transform: skewX(-15deg);
    }
}

https://jsfiddle.net/victor_007/7eLy1pmL/1/

Rotate only the Border using CSS

rotating parent will rotate child as well so it's better to style border separately like here

.circle {  width: 100px;  height: 100px;  position: relative;}.circle .border {  /* content: ''; */  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background: transparent;  border-radius: 50%;  border: 2px dashed #000;  -webkit-animation-name: Rotate;  -webkit-animation-duration: 2s;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;  -moz-animation-name: Rotate;  -moz-animation-duration: 2s;  -moz-animation-iteration-count: infinite;  -moz-animation-timing-function: linear;  -ms-animation-name: Rotate;  -ms-animation-duration: 2s;  -ms-animation-iteration-count: infinite;  -ms-animation-timing-function: linear;}.play {  padding: 20px 30px;  font-size: 56px;}.stop {  font-size: 12px;  padding: 30px;  text-align: center;}@-webkit-keyframes Rotate {  from {    -webkit-transform: rotate(0deg);  }  to {    -webkit-transform: rotate(360deg);  }}@-moz-keyframes Rotate {  from {    -moz-transform: rotate(0deg);  }  to {    -moz-transform: rotate(360deg);  }}@-ms-keyframes Rotate {  from {    -ms-transform: rotate(0deg);  }  to {    -ms-transform: rotate(360deg);  }}

<div class="circle">  <div class="border"></div>  <div class="play"><i class="fa fa-play"></i>  </div></div>
<p>  PS: The icon loading is a bit slow. Wait until it shows up.</p>
<div class="circle">  <div class="border"></div>  <div class="stop">Stop me please</div></div>

CSS Rotate only the border

.loader-wrapper {  position: fixed;  width: 100%;  height: 100%;  text-align: center;  z-index: 1;}
@-webkit-keyframes spinner-border {  to {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }}
@keyframes spinner-border {  to {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }}
.loader {  position: relative;  top: 5px;  left: auto;  width: 80px;  font-size: 20px;  text-align: center;  display: inline-block;  width: 10rem;  height: 10rem;  vertical-align: text-center;  }.loader::after {  content: '';  position: absolute;  left: 0;  top: -10px;  width: 100%;  height: 100%;  border: 0.25em solid currentColor;  border-right-color: transparent;  border-radius: 50%;  -webkit-animation: spinner-border .75s linear infinite;  animation: spinner-border .75s linear infinite;}

<div class="loader-wrapper">  <div class="loader">Loading</div></div>

CSS Border rotation

A solution that require JavaScript and canvas, but offers great versatility -

Result:

ONLINE DEMO

Code:

function makeBorder(id, bw, rSkew, radius) {

    var el = document.getElementById(id),
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),

        bwh = bw / 2,
        w = parseInt(getComputedStyle(el).getPropertyValue('width'), 10),
        h = parseInt(getComputedStyle(el).getPropertyValue('height'), 10);

    canvas.width = w;
    canvas.height = h;

    /// draw border        
    ctx.beginPath();
    roundedRect(ctx, bwh, bwh, w - bwh, h - bwh, radius, rSkew);
    ctx.lineWidth = bw;
    ctx.stroke();

    /// set as background
    el.style.background = 'url(' + canvas.toDataURL() + ') no-repeat top left';
}

The add this for creating the rounded rectangle (with mod. for skew):

function roundedRect(ctx, x, y, w, h, rul, skew) {
    //modification to fit purpose here

    var rur = rul,
        rbr = rul,
        rbl = rul,
        dul = rul * 2,
        dur = rul * 2,
        dbr = rul * 2,
        dbl = rul * 2,
        _x, _y,
        ww = x + w,
        hh = y + h,
        rr,
        pi = Math.PI,
        pi15 = Math.PI * 1.5,
        pi05 = Math.PI * 0.5;

    //Upper Left    
    rr = [x, y, dul, dul];
    _x = rr[0] + rr[2] / 2;
    _y = rr[1] + rr[3] / 2;
    ctx.arc(_x, _y, rul, pi, pi15);

    //Upper right
    rr = [ww - dur, y, dur, dur];
    _x = rr[0] + rr[2] / 2;
    _y = rr[1] + rr[3] / 2;
    ctx.arc(_x, _y, rur, pi15, 0);

    ctx.lineTo(ww - skew, h);

    //Bottom left
    rr = [x, hh - dbl, dbl, dbl];
    _x = rr[0] + rr[2] / 2;
    _y = rr[1] + rr[3] / 2;
    ctx.arc(_x, _y - 1, rbl, pi05, pi);
    ctx.closePath();
}

Then you just call this function with ID of element, border width and how many pixels you want to skew the right side with:

makeBorder('demo', 2, 50, 7);

How to rotate the border colors of a div

The only solution I can think of is using pseudo elements (or nested elements) to decouple the border and the center.

.ball-5 {  background: #fff;  border-radius: 500px;  box-shadow: 0px 0px 10px #222;  padding: 10px;  cursor: pointer;  overflow:hidden;  border:0px;}
.ball-5 {  position:relative;  width: 115px;  height: 70px;}
.ball-5:before{  display:block;position:absolute;  top:-55px;left:-30px;  content:"";width:0px;height:0px;  border: solid 100px;  border-top-color:  rgba(156, 206, 228, 1);  border-right-color: rgba(122, 183, 142, 1);  border-bottom-color: rgba(255, 177, 38, 1);  border-left-color: rgba(241, 139, 41, 1);}
.ball-5:after{  display:block;position:absolute;  top:10px;left:10px;  content:"";  width: 115px;  height: 70px;  background:white;  border-radius: 500px;}
.ball-5:before {  animation: Rotate 2s infinite linear;}
@keyframes Rotate {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }}

<div class="ball-5"></div>

Rotated text on left border of responsive div

Use transform-origin

.fp-wrapper {  position: relative;  display: inline-block;  margin-left: 50px;}
.fp-image {   width: 100%;  padding: 10px;  border: 1px solid #53565a;  z-index: 1;}
.fp-title1,.fp-title2 {  padding: 0 10px;  background: #fff;  position: absolute;  top: 0;  left: 30px;  color: #53565a;  text-transform: uppercase;  font-weight: 500;}
.fp-title2 {  transform: translate(-100%, 0%) rotate(-90deg);  transform-origin: right center;}
.w2 .fp-image {  width: 80%;}
.w3 .fp-image {  width: 60%;}

<div class="fp-wrapper">  <a href="/url1">    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">  </a>  <p class="fp-title1">Text on top border</p>  <p class="fp-title2">Text on left border</p></div>
<div class="fp-wrapper w2">  <a href="/url1">    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">  </a>  <p class="fp-title1">Text on top border</p>  <p class="fp-title2">Text on left border</p></div>

<div class="fp-wrapper w3">  <a href="/url1">    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">  </a>  <p class="fp-title1">Text on top border</p>  <p class="fp-title2">Text on left border</p></div>

CSS rotated div border shows odd outline

A simple fix of this is by using backface-visibility: hidden.

When an element rotates, it seems that the rendering of transform: rotate() may cause the back face of it to be shown, as if in 3D perspective.

This possibly lead to the background-color of the back face (a mirror image the element's front face) overflowing the border edge in this case.

backface-visibility: hidden fix it by rendering the back face invisible, as shown in below example.

On side note, MDN did mention that backface-visibility has no effect on 2D transforms, which indicates that this behavior of transform: rotate() to have perspective is more accidental than expected.

Example:

body {
  background-color: black;
  display: flex;
  gap: 100px;
}
div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
}
div + div {
  /*   fixed here */
  backface-visibility: hidden;
}

<div></div>
<div></div>

How to achieve rotating only border and not the icon using CSS

Here's an option with reverse transform. I updated the HTML to rotate an inner element instead of the .box itself to separate the bootstrap elements from the rotating elements.

.details-section {
  background-color: rgb(83, 83, 83);
  height: 200px;
}

.icon-container {
  border: 2px solid #c49b63;
  transition: 0.5s linear;
}

.box i {
  font-size: 70px;
  color: black;
  transition: 0.5s linear;
}

.icon-container:hover {
  transform: rotate(135deg);
}

.icon-container:hover i {
  transform: rotate(-135deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<div class="container-fluid details-section">
  <div class="row justify-content-center h-100">
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
  </div>
</div>

CSS animated gradient border on a DIV

I like your original idea with using overflow: hidden, but to make it work I had to include an extra wrapper div.

• The outer wrapper defines a padding which serves as the display area for the gradient border
• The inner div is just the content box with a black background

.loading-box-container {
  --size: 200px;
  --radius: 10px;
  position: relative;
  width: var(--size);
  height: var(--size);
  padding: var(--radius);
  border-radius: var(--radius);
  overflow: hidden;
}

.loading-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #000;
  border-radius: var(--radius);
}

.loading-box-container::before {
  content: '';
  width: 150%; /* The upscaling allows the box to fill its container even when rotated */
  height: 150%;
  position: absolute;
  top: -25%; left: -25%;
  background: conic-gradient(#0000ff00, #ff0000ff);
  animation: rotate-border 5s linear infinite;
}

@keyframes rotate-border {
    to {
        transform: rotate(360deg);
    }
}

<div class="loading-box-container">
  <div class="loading-box">
    <p>Loading</p>
  </div>
</div>

---

Related Topics