How To Draw Rectangle Box In Css
How to Create a Rectangular Box to Contain Your Text/Pictures with CSS
Draw a box around your content
How to Create a Rectangular Box to Comprise Your Text/Pictures with CSS
by Christopher Heng, thesitewizard.com
Being able to depict a line around a block of text and/or pictures is handy if you want to group a section of related items together. This has the visual result of placing your text and pictures in a rectangular box. The box serves to separate the content from the rest of the page, and may be used either to emphasize its content, or to make it like an inset in your page. This tutorial shows you how you can accomplish this using CSS.
Prerequisites
This article is targeted at those who hand code directly in HTML and CSS. As such, some basic CSS/HTML knowledge is causeless. Y'all exercise not have to be an expert, but you will need some working knowledge of what CSS is as well as how you can insert CSS into your page.
If you have arrived at this page with the intention of learning more virtually how to create your own website, you should read my commodity on How to Start Your Own Website instead. It will have you through all the necessary steps of making your own site. Creating a website is more than than merely designing the visual advent.
Using CSS to Describe a Border Around Your Cake of Text and Pictures
Let'southward say that y'all take some text or pictures that you want to enclose in a box.
-
Create the HTML for the block. For this tutorial, I shall apply a DIV cake to enclose the text/pictures.
<div class="boxed">
This text is enclosed in a box.
</div>I gave the DIV block a form of "boxed" just you can of class use some other valid CSS class name. Supercede my dummy content with your actual text and/or images.
-
Side by side, you volition need to style the DIV box by calculation a border. In your CSS section, or external CSS file, add the following code:
.boxed {
edge: 1px solid green ;
}The CSS code above specifies a 1 pixel edge for the class "boxed". The box will have a solid dark-green border. An example of a box using this code can exist seen to a higher place. I apply the verbal aforementioned code, "
border: 1px solid green", to enclose most of the code examples on thesitewizard.com (at the time I write this).The thickness of the border can be changed if you find a 1 pixel edge as well sparse for your liking. Similarly, other edge styles too "solid" are also possible. For example, "dotted" gives y'all a dotted border, "dashed" a border consisting of dashes, and "double" a double-lined border. Other values, which may or may not be implemented in your browser (depending on which browser y'all're using), include "inset", "starting time", "ridge" and "groove". These give a 3D issue to your box.
The color ("color" in Us English) of the border is specified with an RGB value (like
#000or#000000for black), or, if it is one of the 16 basic colours defined in the CSS specifications, by its colour proper noun. If in doubt, use the color lawmaking. Most HTML editors and programmer'south editors accept colour pickers which you tin employ to select a colour by simply clicking on information technology. The editor then automatically generates the advisable RGB color value for you lot, so using a numeric colour value should not exist uncommonly difficult.If you want to give your box rounded corners, please encounter the article How to Create Rounded Corners for Your Box Borders in CSS. Yous can also create coloured boxes in CSS, where the background of the box has a different colour from the rest of the folio. Another visual effect that can be used is to make the box cast a shadow.
That's information technology. The procedure for creating a rectangular box around your text/images with CSS is, as you can see, very simple.
Copyright © 2008-2020 by Christopher Heng. All rights reserved.
Get more costless tips and articles like this, on spider web blueprint, promotion, revenue and scripting, from https://www.thesitewizard.com/.
thesitewizard™ News Feed (RSS Site Feed) 
Do you observe this article useful? You tin learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Only point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. Y'all can read more nigh how to subscribe to RSS site feeds from my RSS FAQ.
Please Do Not Reprint This Article
This article is copyrighted. Please do non reproduce or distribute this article in whole or part, in any form.
Related Pages
- How to Design a Two Column Layout for Your Website Using CSS
- How to Make Your Links Change Colour When the Mouse Hovers Over It (Using CSS)
- How to Create 3D Buttons Using CSS
- How to Make a Mobile-Friendly Website: Responsive Design in CSS
- What is Favicon.ico and How to Create a Favicon Icon for Your Website
- Important Precautions to Accept When Buying a Domain Proper noun
- How to Accept Credit Cards on Your Website
- How to Register Your Own Domain Name
New Manufactures
- How to Set the Acme of a DIV Relative to a Browser Window (CSS)
- How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
- How to Insert Meta Tags into a Spider web Folio with BlueGriffon
- How to Play a Vocal (or Another Sound Prune) from a Listing on a Website
- How to Draw a Horizontal Line on a Spider web Page with Expression Spider web
- How to Create a Website Free of Charge
- Why Can't I Make Up Whatever Domain I Want? Is In that location a Way to Do Away with a Registrar Altogether?
- What's the Departure Between a Domain Name Registrar and a Web Host?
- How to Make a Mobile-Friendly Website: Responsive Design in CSS
- What's the Deviation Between a Content Management System (CMS), a Blog, a Web Editor and an Online Site Builder?
Popular Articles
- How to Create a Blog
- How to Make / Create a Website: The Beginner's A-Z Guide
- Tips on Choosing a Adept Domain Name
- Expression Web Tutorial: How to Design a Website with Microsoft Expression Web
- Dreamweaver Tutorial: How to Pattern a Website with Dreamweaver CS6
- BlueGriffon Tutorial: How to Design a Website with BlueGriffon 3
- How to Design and Publish Your Website with KompoZer (costless WYSIWYG web editor)
- Free Feedback/Contact Form Wizard
How to Link to This Page
Information technology will appear on your page as:
How to Create a Rectangular Box to Contain Your Text/Pictures with CSS
Copyright © 2008-2020 past Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 7 April 2020.
Source: https://www.thesitewizard.com/css/rectangular-box-border.shtml
Posted by: whanghattertion58.blogspot.com
0 Response to "How To Draw Rectangle Box In Css"
Post a Comment