Border to the text | Sololearn: Learn to code for FREE!

+5

Border to the text

How to add the border to text which is aligned at center?

6/26/2020 11:51:35 AM

payal Pawale

32 Answers

New Answer

+11

payal Pawale You can't add a dotted or solid Border in text. I already answered the ways you can. But those are not exactly real borders. If you still think a dotted Border around text is possible using css then this video is for you 😂 https://youtu.be/Ja9wUHH3hzw

+10

Here you go https://code.sololearn.com/WheKlC3l16Bw/?ref=app

+9

Calviղ I think he meant the question he asked (he wanted dotted Border)

+9

payal Pawale 🤦🏽‍♂️🤦🏽‍♂️🤦🏽‍♂️ <fieldset> <legend>Try this</legend> //Your codes like paragraph etc </fieldset>

+8

You can use : -webkit-text-stroke: 2px red; OR Multiple text-shadow, e.g., text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff First one is recommended. Hope it helps you.

+4

payal Pawale here a simple one. https://code.sololearn.com/W8A9iE8b3Wig/?ref=app

+3

payal Pawale here you go, a border with tittle text on border top https://code.sololearn.com/WASM7eQ2eC1Y/?ref=app

+3

This answers are all amazing

+3

Ohhh I've learnt new syntax through the codes posted here

+3

You can try this border:5px dashed black

+2

payal Pawale now you show it.. 🤧

+1

Calviղ Yess Thank you so much

+1

I'm not one hundred precent sure but you could try this: <font border="3px"> <p align="center"> your text </p> </font> That may don't work, but something that will for sure work is svg, if you know how to use it, it will be like this: <p align="center"> <svg width="200" height ="100"> <rect width="200" height"50" x="0" y="20" fill="none" stroke="black" stroke-width="3" /> <text x="2" y="23" font-size="2m"> your text </text> </svg> </p> I haven't tried out the numbers yet so you may need to fix these in order to put your text at the exact place you need it to be and you also may need to make the border bigger or smaller, you can just change the numbers till its how you want it to be. If you want the border to be dotted you simply put stroke-dasharray ="5 5" in rect shape, the first 5 decides how big the dots are the second 5 how big the spaces will be.

+1

<style> span{border: 1px solid black; } </style> <body> <p> <span>your text here </span></p> </body>

0

No it's shadow. I want to add border like dotted, solid etc

0

payal Pawale All right, I know what you want now.. Here the text with border outline only. https://code.sololearn.com/W5FYihk9443T/?ref=app

0

Calviղ see my post .i want main- text overlay with some text

0

payal Pawale Here you go, a main text overlay with another text. https://code.sololearn.com/WbLnFM05tYNI/?ref=app

0

Calviղ no this is to much....i just want simple one Please See my post once.

0

Calviղ Thank you so much calvin for help. But i want the same which one i posted