How to Code Text in a Box

Hi, you just need some kind of container around your text. Could be a blockquote, paragraph with a class, or a div. Here is an example with a div:

<div class="feature-box">

	Some text inside the box.

</div>

Now you just need to add a bit of CSS to your theme’s stylesheet to style that markup:

.feature-box {
	background-color: #e3f0f2;
	border: solid 1px #66cccc;
	padding: 10px;
}

Thanks for the reply but i can’t find the div class you mentioned in your reply.

I totally understood your CSS part in which i have to add this code.

.feature-box {
	background-color: #e3f0f2;
	border: solid 1px #66cccc;
	padding: 10px;
}

You need to write that div code wherever you want the box to appear.

Thanks so much JLeuze I have applied the given code by you and it worked like a charm.Here’s the Image Below.
https://funky.freakingkid.com/images/block1.png

One more thing wanna ask is how to make a rounded corner and you can see the text inside the box is not well aligned and the text showing is only italic.I want a standard text.See the Gap on the upper and the bottom, I want to put the text on the center of the blockquote.
Please see the refer image.
https://funky.freakingkid.com/images/post.png

https://www.w3schools.com/css3/css3_borders.asp

in your style.css add the following to your blockquote element

border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;

in your screen.css remove font-style: italic; from the blockquote element

Thanks David for a support I have added/modify your code in Style.css and screen.css but all i get is a font style which is now standard(Solved).Border and Text align still the same even i hard refreshed it. See the Image Below.
https://funky.freakingkid.com/images/untitlrfr.png

Here is the full code:

blockquote {
	background-color: #e3f0f2;
	border: solid 1px #66cccc;
	padding: 10px;
	border-bottom-left-radius: 25px 25px;
    border-bottom-right-radius: 25px 25px;
    border-top-left-radius: 25px 25px;
    border-top-right-radius: 25px 25px;
	}

Different browsers need different rules for rounded corners and some old browsers don’t support them at all.

Please Help me I don’t know which code i have to apply for a rounded corner.

David Provided me the below code for a rounded corner,which didn’t work.

border-bottom-left-radius: 25px 25px;
    border-bottom-right-radius: 25px 25px;
    border-top-left-radius: 25px 25px;
    border-top-right-radius: 25px 25px;

The problem is now Solved.

Thanks for the support.

No problem, good to hear you got it fixed.