title: How to achieve rotating only border and not the icon using CSS
body: <p>I am trying to rotate my border 135 deg on hover but icon rotate also and i want ONLY the border, i post the code if you can help me i will appreciate it,Thank you!</p>
  <pre><code> My html: `
      &lt;div class=&quot;container-fluid details-section&quot;&gt;
        &lt;div class=&quot;row justify-content-center h-100&quot;&gt;
         &lt;div class=&quot;col-xl-2 my-auto box text-center&quot;&gt;
            &lt;i class=&quot;fa fa-guitar&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
         &lt;div class=&quot;col-xl-2 my-auto box text-center&quot;&gt;
            &lt;i class=&quot;fa fa-guitar&quot;&gt;&lt;/i&gt;
         &lt;/div&gt;
         &lt;div class=&quot;col-xl-2 my-auto box text-center&quot;&gt;
            &lt;i class=&quot;fa fa-guitar&quot;&gt;&lt;/i&gt;
         &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;`
  
      And CSS: 
      
          `.details-section{
            background-color: rgb(83, 83, 83);
            height: 200px;
          }
          
          
          .box i{
            font-size: 70px;
            border: 2px solid #c49b63;
            color: black;
          }
      .box:hover i{
        transform: rotate(135deg);
      }
      `
  </code></pre>