Pages

Friday, May 11, 2012

How to Add Text Frames and Borders to Blogger Blogspot Post

Have you ever wanted to add a simple frame or border around some text in your Blogger Blogspot post like the ones below?

Text inside solid border/frame.
Text inside dashed border/frame.
Text inside dotted border/frame.
Text inside groove border/frame.
Text inside ridge border/frame.
Text inside double border/frame.
Text inside inset border/frame.
Text inside outset border/frame.
Text inside solid border/frame and colored background.
Text inside border/frame with differently colored borders.
Text inside border/frame with rounded borders (not supported in IE).


Note #1: For each of the examples that follow copy the code in the Blogger's HTML editor after the text where you want the border/frame to appear. Return to visual Blogger's post editor to edit as you like (font, font size, color etc.) these lines
  • Type Your Text Here,
  • The Text Line After the Border.
Have in mind that, if you want to return to the HTML editor, a code may be rearranged (this can be quite tricky).


Few Basic Codes 

The code for all of the above borders/frames, with exception of the last two frames (the one with the differently colored borders and the one with rounded corners), is similar and is a modification of the codes in the next to examples.

Example #1:
<div style="
border: solid 5px #aaaaaa;
background: #FF93E7;
font-size: 18px;
margin: 40px;
padding: 30px;
text-align: justify;
">
Type Your Text Here
</div>
The Text Line After the Border.
The visual result:
Type Your Text Here
The Text Line After the Border.

Example #2:
<div style="
width: 300px;
height:70px;
border: double 6px #00385B;
">
Type Your Text Here
</div>
<br/>
The Text Line After the Border.
The visual result:


Type Your Text Here

The Text Line After the Border.


Attributes explanation:
  • The width attribute should be added (with values in pixels or percent, e.g. 500px or 67%) if the width of the whole border/frame is less than the text width.
  • The height attribute should be added (with values in pixels e.g. 500px) if you want a border/frame with exact height. Keep in mind that adding this attribute may result in text overflow. So, I recommend skipping this attribute.
  • After the border attribute has are three types of values:
    1. solid or, alternatively, dashed, dotted, groove, ridge, double, inset and outset (read carefully the text inside the first 8 frames above),
    2. 5px, which is the border widht,
    3. #aaaaaa which is hex code for the border color.
  • The background attribute should be added if you want a colored background inside the text (DIY: try adding a code without the border attribute).
  • The font-size attribute refers to the text size. Since this you can edit the text in the visual Blogger's post editor, you may skip this line in the above code.
  • The value after the margin attribute is the distance from  each border (top, bottom, right and left) to the surrounding post elements (usually above and below the border/frame).
  • The value after the padding attribute is the distance from each border (top, bottom, right and left) to the text inside the border/frame.
  • The text-align attribute controls the text alignment (left, center, right, justify) inside the borders. Since the text alignment can be controlled trough the visual Blogger's post editor, you can skip this attribute too.

Example #3: Controlling the width, height and alignment of the border/frame 

The border/frame I was looking for is this one
A NICE DOUBLE BORDER AROUND TEXT THAT WILL STAND OUT!!!
As with the alignment of the horizontal line when added via the <div> tag (explained in the previous post) , the code in Example #1 or Example #2 should be "wrapped" with another <div> tag (the red colored text of the code) as follows:
<div align="center">
<div style="
border: double 5px #aaaaaa;
font-size: 24px;
margin: 40px;
padding: 30px;
width: 50%;
height: 150px;
">
A NICE DOUBLE BORDER AROUND TEXT THAT WILL STAND OUT!!!
</div>
</div>

Differently styled top, right, bottom and left border, margin and padding

The top, right, bottom and left border, margin and padding can be differently styled, for example like this: You can  like this you can add in the HTML editor a code.


  • The outer border/frame is a 1x1 table (e.g. a table with one row and one column).
  • The inner borders are on different distances from the corresponding outer borders.
  • The distances from this text (which is left aligned) to the top, right, bottom and left inner border are different.
  • The text was modified in the visual editor   

The corresponding HTML code is:
<table border="2" cellpadding="0" cellspacing="0" style="text-align: left; width: 100%;"><tbody><tr><td style="vertical-align: top;"><div style="border-bottom: solid 6px orange; border-left: solid 3px darkgreen; border-right: solid 6px blue; border-top: solid 6px red; margin-bottom: 10px; margin-left: 50px; margin-right: 20px; margin-top: 65px; padding-bottom: 10px; padding-left: 65px; padding-right: 15px; padding-top: 65px;"><br /><ul><li><span style="font-family: 'Courier New', Courier, monospace;"><b>The outer border/frame is a 1x1 table (e.g. a table with one row and one column).</b></span></li><li><span style="color: #741b47;"><b>The inner borders are on different distances from the corresponding&nbsp;outer borders.</b></span></li><li><span style="font-family: Georgia, 'Times New Roman', serif;"><i>The distances from this text (which is left aligned) to the top, right, bottom and left inner border are&nbsp;different.</i></span></li><li><span style="font-size: x-small;"><b>The text was modified in the visual editor</b></span> &nbsp;&nbsp;</li></ul></div></td></tr></tbody></table>

Rounded Borders

Rounded border/frame is not supported in IE (current version 9) when the following code is added trough the Blogger's HTML post editor, but it is supported in Firefox, Chrome, Opera and Safari (current versions running on Vista SP2).

Note #2: When I added the next code to one of my sites created with Google Sites, the rounded corners where visible in IE9!?!

The Code for the Rounded Borders Used in This Post
<div style="
-khtml-border-radius: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: solid 5px #bbbbbb;
margin: 0;
padding: 10px;
text-align: justify;">
Text inside border/frame with rounded borders (not supported in IE).
</div>

Have fun using the above codes!!!

Update (MAY 16, 2012): Check the CSS 3.0 Maker text borders ideas.

109 comments:

  1. Thank you! Just what I needed. I'm now following your blog :)

    ReplyDelete
    Replies
    1. Very interesting blog. Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately interested in this one. Just thought that I would post and let you know.online advertising

      Delete
    2. Web Design Experiments: How To Add Text Frames And Borders To Blogger Blogspot Post >>>>> Download Now

      >>>>> Download Full

      Web Design Experiments: How To Add Text Frames And Borders To Blogger Blogspot Post >>>>> Download LINK

      >>>>> Download Now

      Web Design Experiments: How To Add Text Frames And Borders To Blogger Blogspot Post >>>>> Download Full

      >>>>> Download LINK iu

      Delete
  2. love it, this is what ive been looking for, check my blog out and see it
    http://project2wo.blogspot.com/

    ReplyDelete
  3. The coding are really helpful and impressive to create it for our own. Thanks for the sharing.

    Best web site developer | professional seo company in Dindigul

    ReplyDelete
  4. Wow! I wish I would have seen this first! this is my first blog and no I do not know much about coding. I posted a code someone else gave me for a border. And still no border where I need it and every post I have now has the code written on the post! Can anyone help me before it gets worse??

    ReplyDelete
  5. Thank you for sharing this powerful article, your explanation is clear and very easy to understand. Please kindly visit our site to get more information about IT solution.


    ReplyDelete
  6. Thank you for sharing this powerful article, your explanation is clear and very easy to understand. Please kindly visit our site to get more information about IT solution.

    ReplyDelete
  7. A critical imperative blog by the designer with stores of helpful post on site engineering and change. An obligation of appreciation is all together for share quality information with us.

    best eCommerce Website developers company in india
    experts of web developer companies in india

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. If you also want to have a successful business then you can contact Next Mile Digital, it is a platform where you will get all digital marketing solutions
    Website Designing Agency in Bangalore | Website Development Agency in Bangalore

    ReplyDelete
  10. Thank sir
    http://www.dollar-guru.com/2018/03/How-to-Make-Faucet-Website.html?m=1

    ReplyDelete
  11. thank you for this great article, keep more share updates.
    Rochester Web Design - Faribault Web Designer

    ReplyDelete
  12. hello Thanks for sharing this artricle.Please update more so we will back soon.We are one of the most trusted Android Mobile App Developmentand IOS application development to meet your business complex requirement through offshore world.
    Do you have project and want to discuss with us ?
    We can assist you in Web Application Development, Mobile App development, Games Development & Emerging Technology.





    ReplyDelete
  13. That's wonderful stuff you've written up here. Been searching for it all around. Great blog Web Development Company USA | Web Design Company Near Me.

    ReplyDelete
  14. Keep share these type of blog are very helpfull. Pernail Wall Frame

    ReplyDelete
  15. Exceptionally decent post. I just unearthed your weblog and needed to state that I've truly appreciated surfing around your blog entries. After all I'll be buying in to your feed and I trust you compose again soon!

    Long Island Web Design

    ReplyDelete
  16. Los Angeles Web Design
    Wonderful cases. Extraordinary article. A debt of gratitude is in order for sharing this data.

    ReplyDelete
  17. Sneakers com
    First You got a great blog .I will be interested in more similar topics. i see you got really very useful topics , i will be always checking your blog thanks.

    ReplyDelete
  18. Really an interesting and amazing post. Thanks for sharing this wonderful informative article here. I appreciate your hard work.Web Designing Company Bangalore | Website Design Company Bangalore

    ReplyDelete
  19. Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking.Ruby on Rails Online Course

    ReplyDelete


  20. I think this article will fully complement you. Please continue publishing helpful topics like this. Regards, from Web Design Brisbane
    Custom Software Development Brisbane
    Web Development Brisbane

    ReplyDelete
  21. The site designer may get the job done freely or even as a member of a company which is particularly into designing proficient stores. For instance, if you want non-profit website then non-profit website designers are the ideal choice for you.

    Web Design Brisbane

    ReplyDelete
  22. Great post, you have pointed out some fantastic points , I likewise think this s a very wonderful website.
    Best Web designer

    ReplyDelete
  23. Great post, you have pointed out some fantastic points , I likewise think this s a very wonderful website
    Best Web designer

    ReplyDelete
  24. Very Nice Article it's very Informative i have learnt lot.Thanks for sharing.Such Informative Article How to set margins in word

    ReplyDelete
  25. Awesome post presented by you..your writing style is fabulous and keep update with your blogs.
    eCommerce Design Los Angeles
    SEO Services in Los Angeles

    ReplyDelete
  26. Merhaba canım,

    Blogunuzu Çok Seviyorum ... Günlük Blogunuzu Görüyorum, Benim İçin Çok Yararlı.

    MEZ BİLİŞİM Dijital Ajans kullanıcı deneyimini ve dönüşümlerini geliştirmeye yardımcı olan en iyi özel SEO, web tasarım ve dijital pazarlama hizmetlerini sunmaktadır.

    Burayı ziyaret edin - https://www.mezbilisim.com/

    ReplyDelete
  27. Excellent Blog !
    Really Appreciated !
    One Of The Great Information About Web Design !!
    Have A Look At Our Site !!
    Web Development Service

    ReplyDelete
  28. QuickBooks Desktop Tech Support Phone Number - With the latest software release of QuickBooks Desktop 2019, it has successfully outgrown other business software products in the competitive market. QuickBooks Desktop gives you the flexibility to manage your accounting, inventory, point of sale, payroll, payment and increase your productivity. It also allows you to track items, vendors and customers.

    QuickBooks POS Tech Support Phone Number | QuickBooks Payroll Tech Support Phone Number

    ReplyDelete
  29. Really Good Article Thanks a lot for share it. Very informative and helpful for everybody
    Best web design agency

    ReplyDelete
  30. I have read this whole blog and it is an amazing blog for developers who are dealing daily with the new challenges and tasks.
    Thank You for sharing such a valuable, informative and useful thoughts for users in your blog.
    Best website designer in Delhi
    SEO packages in Delhi
    Best website designer in Delhi
    Best website designer in Delhi
    Top Website Designing Company in Delhi
    Best website developer in Delhi

    ReplyDelete
  31. I have read this whole blog and it is an amazing blog for developers who are dealing daily with the new challenges and tasks.
    Thank You for sharing such a valuable, informative and useful thoughts for users in your blog.
    Best SEO services company Delhi

    Website developer in Delhi NCR
    SEO services provider in Delhi
    SEO services in Delhi NCR
    Best SEO services company Delhi
    Website Design and Development Company in Delhi
    Top website development company in Delhi NCR
    SEO Company in Delhi
    Best seo services Delhi

    ReplyDelete
  32. I have read this whole blog and it is an amazing blog for developers who are dealing daily with the new challenges and tasks.
    Thank You for sharing such a valuable, informative and useful thoughts for users in your blog.
    Website Design and Development Company in Delhi

    Website developer in Delhi NCR
    SEO services provider in Delhi
    SEO services in Delhi NCR
    Best SEO services company Delhi
    Website Design and Development Company in Delhi
    Top website development company in Delhi NCR
    SEO Company in Delhi
    Best seo services Delhi

    ReplyDelete
  33. Thank you for this tutorial. I wanted to put one long divided box, but with your instructions, I was at least able to put three boxes side by side. It works on my test blog at least. Now to put it into practice on my public blog and see if it is still arranged right.

    ReplyDelete
  34. nice blog for , best SEO company in Surat , i am also work of this type of blogs.

    ReplyDelete
  35. Really appreciate this wonderful post that you have provided for us. Great site and a great topic as well I really get amazed to read this.
    Nice Post. Thanks for sharing.
    Shopify Developer in USA | Website Agency in USA | Cheap Website Developer in USA | Professional Website Developer in USA | Online Store Developer in California | Web Developer in California || E-Store Developer in California |


    ReplyDelete
  36. Great information...Your post the very informative i have learned some information about your blog thank you for Sharing the great information...
    Full Stack Online Training

    ReplyDelete
  37. This is a very nice article, I really like it. It’s informative and helpful for us.
    Thank you for sharing with us.

    seo company in bangalore

    ReplyDelete
  38. Really appreciate this wonderful post that you have provided for us. Great site and a great topic as well I really get amazed to read this.keep posting such useful information.
    oracle training in chennai

    oracle training institute in chennai

    oracle training in bangalore

    oracle training in hyderabad

    oracle training

    hadoop training in chennai

    hadoop training in bangalore

    ReplyDelete
  39. Great blog. All posts have something to learn. Your work is very good and i appreciate you and hopping for some more informative posts.
    Web Designing Company Islamabad

    ReplyDelete
  40. Very significant Information about Web Development Company, The representation of this Information is actually superb. Thanks for this valuable information and keep blogging!!

    Visit: Web Development Company California USA

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. Interesting Blog post. Thanks for sharing this Article. It will be helpful for those who are unaware about it. If you looking for best Web app development company, reach out Way2smile Solutions Best Web App Development Companies in Chennai

    ReplyDelete
  43. Traffici5 is the Digital marketing company in coimbatore. Traffici5 offers so many services according to the clients needs.

    ReplyDelete
  44. Very informative blog and useful article thank you for sharing with us, keep posting
    by cloudi5 is the Web Design Company in Coimbatore

    ReplyDelete
  45. Such an excellent blog! I had been searching for exactly this info, but couldn't find it anywhere! Thank you!

    ReplyDelete
  46. Trueline Solution is leading Digital Marketing Company in Surat that provides services like SEO, SMM, ASO, SMO, PPC and many other digital marketing services and development services.

    ReplyDelete
  47. Nice blog! I really loved reading through this Blog... Thanks for sharing such a very interesting post with us and keep blogging. Visit our website-
    web development company
    hire xamarin developer from inwizards
    hire .net developer
    hire android developer

    ReplyDelete
  48. We are a leading mobile app, website design & development company based in India provides custom digital web services for startups & enterprise businesses at affordable rates. Contact Us Now!

    you can visit here for more info : best it company in surat

    ReplyDelete
  49. Great Content. It will useful for knowledge seekers. Keep sharing your knowledge through this kind of article.
    IELTS Writing Skills
    IELTS Writing Techniques

    ReplyDelete
  50. Nice blog! I really loved reading through this Blog... Thanks for sharing such a very interesting post with us and keep blogging. Visit our website-Dynamics AX Upgarde Partner Dubai
    Power Platform Implementaion Partners

    ReplyDelete
  51. Hey! Great post I just came across, your blog and I love it!
    I really enjoyed to read that all i will always follow You thanks for the great article.
    Web Designing Services in Vijayawada

    ReplyDelete
  52. Nice blog! I really loved reading through this Blog... Thanks for sharing such a very interesting post with us and keep blogging

    Zendesk Artificial Intelligence
    Salesforce Survey Tool

    ReplyDelete
  53. Hi, I Read your blog and I feel it is a very wonderful, informative blog .
    There are a lot of good information on this blog, I'd like to Share and I think people will get a lot of support from this blog.
    MBA Pharma
    Top 10 LLB colleges in india

    ReplyDelete
  54. I am a regular user of your post, this one also was very interesting and well written. keep sharing the great work..
    IIT Jam 2022
    XAT 2022

    ReplyDelete
  55. The coding are really helpful and impressive to create it for our own. Thanks for the sharing.
    Civil Engineering
    Electrical and Electronics Engineering
    Biotechnology Engineering

    ReplyDelete
  56. This post is really amazing
    Village Talkies a top-quality professional corporate video production company in Bangalore and also best explainer video company in Bangalore & animation video makers in Bangalore, Chennai, India & Maryland, Baltimore, USA provides Corporate & Brand films, Promotional, Marketing videos & Training videos, Product demo videos, Employee videos, Product video explainers, eLearning videos, 2d Animation, 3d Animation, Motion Graphics, Whiteboard Explainer videos Client Testimonial Videos, Video Presentation and more for all start-ups, industries, and corporate companies. From scripting to corporate video production services, explainer & 3d, 2d animation video production , our solutions are customized to your budget, timeline, and to meet the company goals and objectives.
    As a best video production company in Bangalore, we produce quality and creative videos to our clients.

    ReplyDelete
  57. It's very nice and informative. Thank you for sharing this knowledge with us. I'm also a blogger who teaches folks about app and software development. You can find my work by clicking here.
    Best Website development company in Pune
    Best digital Marketing Company in Pune

    ReplyDelete
  58. It's very nice and informative. Thank you for sharing this knowledge with us. I'm also a blogger who teaches folks about app and software development. You can find my work by clicking here.
    Website Designing Company in South Delhi
    Web Designing Delhi
    Website Designing Company in Delhi NCR
    Web Design and Development Agency

    ReplyDelete
  59. I am a regular user of your post, this one also was very interesting and well written. keep sharing the great work
    Best Web Design Company india
    Top Web Designing Companies in India
    Low Cost Web Design Company in India

    ReplyDelete
  60. Best Dining Chairs

    In this guide, let us help you explore the very best dining chairs in every material and style that you can buy in 2022.

    These best dining chairs are extremely beautiful, comfortable and perfectly dedicated not only for your dining space but also for indoor and outdoor use.

    ReplyDelete
  61. Thanks for this great tutorial. I love it so much. Though I have already implemented a similar code to my website, check it out athttps://entrepreneurtipsblog.com.

    ReplyDelete
  62. Thanks for this awesome tutorial. I love it so much. Though I have already implemented a similar code to my website, entrepreneurtipsblog.com.

    ReplyDelete
  63. Thanks for such a valuable information . keep sharing your knowledge.
    Graphic design company.

    ReplyDelete
  64. Thank you for sharing very useful and informative information and get the seo services at very affordable prices in Dubai.
    https://www.si3.ae/seo-services-agency-dubai/

    ReplyDelete
  65. Nice post , thanks for such a interesting post.
    we are the Top Web Development Company in Bangalore

    ReplyDelete
  66. Now, digital marketing is a unique way of promoting a business. It is far different from traditional marketing as it advertises the business or product through a different medium, that is, the internet. Unlike digital marketing, traditional marketing was expensive, meaning only big companies or businesses were able to afford it. In today’s era, it is essential for any industry to have an official website. Without one, they might not be very successful. So, if you do not want to end up in such a scenario, then consider contacting Flymedia Technology, as they provide the Best Website Development in Punjab.

    ReplyDelete
  67. That's entirely up to scratch. The explanation is fully aligned with the our anticipation and expectations. Great efforts! Web Design Dubai

    ReplyDelete