CODEWITHSUNDEEP
cssbordercss-shapes
amolD
amolD

Reputation: 87

How to create border in css3

enter image description here

How to create border with help of css3 like the bellow image.

Upvotes: 1

Views: 124

Answers (2)

Anupam Basak
Anupam Basak

Reputation: 1523

There is a border-radius notation for horizontal and vertical radius,

border-radius: horizontal-radius/vertical-radius;

Using this you can create the desired border.

.border {
    width: 250px;
    height: 50px;
    border: 1px dashed #aaa;
    border-radius: 50%/20%;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    color: red;
    font-family: Helvetica;
}
<div class="border">Text Here</div>

Modify the border values according to your need.

Upvotes: 6

jbutler483
jbutler483

Reputation: 24559

You can use border radius in order to get the 'curved' border of the div. Along with adding a dashed border, you can add uppercasing and text aligning for your text.

Result

enter image description here

div {
    width: 250px;
    height: 50px;
    font-family: Helvetica;
    border: 1px dashed gray; /*Makes dashed border*/
    border-radius: 50%/10px; /*Change the px value in order to change border curvature*/
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    color: red;
    text-transform:uppercase;
}
<div>Text Here</div>

Upvotes: 0

Related Questions