CODEWITHSUNDEEP
css
Nursultan Bagidolla
Nursultan Bagidolla

Reputation: 501

Rounded dotted border with gradient

How to make rounded dotted border with gradient in CSS3? I found only borders with gradient and dotted borders separately. This is what I have to implement: enter image description here

Upvotes: 2

Views: 3534

Answers (2)

vals
vals

Reputation: 64174

You can set a white dotted border on top of a gradient image covering only the border zone. It looks like your request

.test {
  width: 300px;
  height: 80px;
  margin: 10px;
  border: dotted 10px white;
  border-radius: 50px;
  background-image: linear-gradient(white, white), linear-gradient(blue, magenta);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
<div class="test"></div>

Upvotes: 4

Debabrata Mohanta
Debabrata Mohanta

Reputation: 645

This can be easily done with CSS3 .

<div class="greeting">Hello&Welcome</div>

And the corresponding css :

 .greeting{
        width:150px;
        height:100px;
        background-color:cyan;
        line-height:100px;
        color :white;
        text-align:center;
        border: 2px dotted black;
        border-radius:20px;
 }

Please find the code in codepen: https://codepen.io/Debabrata89/pen/VadLMM

Hope this helps.

Upvotes: 1

Related Questions