How can i add border around my text?

Hi Monica,

Drag and drop HTML or text widget on to a test page. Copy and paste the code on the HTML editor. Remove "<!--" and "-->. Preview the page and you will see different samples of borders. These sample are basic border with inline CSS, if you want more better look, it can be done.

<!--

<div style="border: 1px solid ;">Example 1</div><br><br>
<div style="border: 2px solid red;">Example 2</div><br><br>
<div style="border: 3px dotted gray;">Example 3</div><br><br>
<div style="border: 4px dashed green;">Example 4</div><br><br>
<div style="border: 1px double ;">Example 5</div><br><br>
<div style="border: 1px groove ;">Example 6</div><br><br>
<div style="border: 1px ridge ;">Example 7</div><br><br>
<div style="border: 10px inset ;">Example 8</div><br><br>
<div style="border: 10px outset ;">Example 9</div><br><br>
<div style="border-left: 10px solid;">Left border only</div><br><br>
<div style="border-right: 10px solid;">Right border only</div><br><br>
<div style="border-top: 10px dashed blue;">Top border only</div><br><br>
<div style="border-bottom: 10px dotted pink;">Bottom border only</div><br><br>

-->

Hope this help. Let me know if you have any questions.

Niddy

Hi Monica,

You can play around with the border styles which are solid, dotted, dashed, double, groove, ridge, inset, and outset.

To determine the thickness of the border, just change the number right before "px".

Thanks

Niddy

I'm sorry I forgot to mention about color.

If you have custom color and know hexadecimal value, then just replace it.

for example of maroon color:

<!--
<div style="border: 4px dashed #800000;">Example 4</div><br><br>
-->

Thanks

Niddy

Wow niddy, thanks alot. Your posts are a great help.
Kershnee, thanks alot for the links :-)

How can Add different styles and sizes of text insdoes the borders Niddy outlined above?

there should be a widget for tables and borders. sites would look so much more organized if everyone used borders. it would certainly make my life easier. i always have to design everything in my html editor before posting it on synthasite.

Do you know of any widgets that have borders? What websites have you created with Synthasite?

how can i make it a text link?

dear naskelis88,

simply highlight the text then click the insert link button then choose the destination

hi todd,

the green tags are actually a 468x60 banner that i think i found here: http://resources.bravenet.com/clipart.... I downloaded the banner, and then uploaded it to photobucket where i made it smaller and put writing on it. i saved a blank copy so i could make as many as i want. i was really thinking out of the box that day. i just saw the banner and thought it would make my page more colorful.

i use my old host 110mb.com to make the tables on my site. it is all html, thats why i moved to synthasite. 110mb has an html editor which lets you create tables and fonts and stuff like that, but all in html. so if i ever need to make a border, i make it at 110mb and then copy and paste the html into an html widget on synthasite.

this is a little off topic, but maybe synthasite should have a small html editor built in it so that more experienced users, as well as anyone willing to learn, can use it to make their sites better without depending on those widgets which, i certainly, barely use. believe it or not, but the pages on my site that contain the games, all 200+ of them, is all an html template that i designed myself using tables (i set the border to 0 so you can't see them). the template takes up 10 pages on a word document

Oh yes I would love to have an HTML editor to add borders and text boxes

Can anybody give me a code/tutorial/instructions on how to make the some text, with links, having a background colour(/texture) with heading(also with background and link)

I dont think i have put it in words very well, so i have made a model picture of what i want, have a look

Hi Monica,

Hope this will help you.

<!-- <style type="text/css">
.beauty_tips {
background-color: pink;
}

.beauty_tips .title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
letter-spacing: 0.5px;
color: #ffffff;
border-bottom: 1px solid red;
background-color: red;
}

.beauty_tips .desc {
font-size: 12x;
display: block;
}

.beauty_tips .desc a {
text-decoration: none;
color: orange;
}

.beauty_tips .desc a:hover {
text-decoration: underline;
color: orange;
}

.beauty_tips a {
text-decoration: underline;
color: green;
}

.beauty_tips a:hover {
text-decoration: none;
color: green;
}
</style>

<div class="beauty_tips">
<p class="title">HEADING</p>

<p class="desc"><a href="#">LINK 1 - no underline</a></p>

<a href="#">LINK 2 - with underline</a>
</div> -->

Remove "<!--" and "-->" at the beginning and at the end. Change the font size and color to the one you like. Place the css script at the every beginning of your page.

Niddy

Niddy you are sooo cool! I appreciate your shares whenever I happen upon them.

Thanks a lot Niddy! Your HTML lessons are a great help to a lot of us here!

hello..
every one can help me
bcouz i saw some people using friendster
i saw their comment using border with inserted text,links and animated pictures..
how can do that??
anyone can help me about it?

no...
its not working in friendster,
the code does not working when i give comment to my friends..
how can i do the table comment,with background,text,links and inserted animated pictures??
can you help me??

hello every body! border around text can be created very easily. go to this link and learn how to do this. the link is http://forums.synthasite.com/tables-i...