How to create border with help of css3 like the bellow image.
Add a comment
|
2 Answers
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.
7 Comments
amolD
Thanks a lot :), this seems to be helpful, but can't we make it dotted as I'm having with the design. I want exactly like that only.
Hashem Qolami
@amolD Just replace
dashed with dotted.
Anupam Basak
@amoID Happy to help you. And the border in your design is not dotted. It's dashed and having a width of 1px. Check this one out: jsfiddle.net/wqxqzmar/2
amolD
Thank you guys, but I am expecting design like I have posted in the image. Is it possible?
amolD
Not matching to my design, anyways thanks for your efforts :)
|
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
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>