How to set CSS borders

Source: Internet
Author: User
Tags border color
CSS in HTML for the border settings, in the text seems to have no more detailed settings.
As for graphics,, volume labels provide hspace,vspace,border and other items to set the border ...
CSS for the extension of the border specifications have more detailed settings ...
Either text or graphics can be displayed by using a border ...
In a graphic column, a graphic that appears on a Web page ...
There are 3 properties of a border, just like the 3 boxes around a picture file ....
From inside to outside is padding,border-width,margin ...
These 3 boxes have the top, bottom, left, right, four properties to set its size ...
A total of 12 properties are as follows:
Padding
padding-top:2px
Padding-right
Padding-bottom
Padding-left

Border-width
Border-top-width
Border-right-width
Border-botton-width
Border-left-width

Margin
Margin-top
Margin-right
Margin-botton
Margin-left

Can be set for a property or at the same time, such as:
PADDING:2PX,1PX,2PX,1PX is up, right, down, left
Or single, like padding-top:2px

As for the form and color of the border, you can set the form Border-style ...
There are up, right, down, left, four properties:

Border-top-style
Border-right-style
Border-botton-style
Border-left-style

The nature of the content can be set to:
Solid: Solid Line
Double: two straight lines
GROOVE:3D Concave Line
Ridge:3d Convex Line
Inset:3d Erhkan into line
Outset:3d Uplift Line

Settings for border color Border-color:
There are up, right, down, left, four properties:

Border-top-color
Border-right-color
Border-botton-color
Border-left-color

The color setting is the same as the font setting ...
................................
For the above setting, if one of the values is set, such as:

Border-style:solid,double

I only set the top and right borders, the missing borders are automatically set by the relative border and ...
So the result would be the equivalent:

Border-style:solid,double,solid,double
...........................................
In practical use, for example:

<meta content= "text/html; Charset=big5 "http-equiv=content-type>
<title></title>
<body>
<table style= "border-width:10;border-style:double;border-color:red" >
<tr><td> Red double straight border </td></tr>
</table>
<div style= "Border-width:10;border-style:ridge;border-color:green" >
Green 3D Convex line border
</div>
</body>



This is probably true for CSS border settings ...
These examples are available on my Web page .... Interested to see ...
If the above content is wrong or if there is a problem.
welcome you mail to me ...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.