• Translate

8/09/2017

Tutorial Creating a Rainbow Border Effect With CSS

Tutorial Blogspot | Tutorial Web Design |

Advertisement

Tutorial Creating a Rainbow Border Effect With CSS
Actually this is not a real border, but will look like a border on a box, can be for notification box or other. This is a div which overlaps with the outer div using the colorful background and the top div with one color background. Padding from the outer div is what makes it into a border. The bigger the padding the greater the effect of the border.

To make this rainbow border effect can use CSS style below :

 .box {
  width: 100%;
  padding: 2px;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: 6px;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
.content {
  background: #fff;
  padding: 12px;
  font-size: 16px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}
And his HTML example as below :
 <div class="box">
  <div class="content">
    <p>
      Nunc faucibus, velit sed dapibus molestie, odio tortor tempor risus, quis pellentesque odio felis ac augue. Maecenas lobortis lorem urna, sit amet iaculis nibh feugiat sed. Aenean bibendum tristique ante, eu commodo orci condimentum non. Donec dapibus, tortor vitae vulputate accumsan, nisi lacus malesuada turpis, vitae convallis ligula eros vitae sapien. Duis massa elit, pellentesque eget leo ut, ornare blandit nisl. Donec hendrerit scelerisque accumsan. Pellentesque vehicula eu tellus quis tristique.
    </p>
  </div>
</div>
The bigger the padding on .div then the greater the effect of the border. For background you can set your own for the color you want displayed.

It looks like the Fiddle below :


Source of Inspiration from Kompiajaib

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.