Home > Developer > Web Develop
CSS borders and Borders
1. CSS Border Properties
CSS Border Properties allow you to specify the style and color of an element's border.
1.1. Border Style
The Border Style property specifies what bounds to display.
The Border-style property is used to define the style of the border
1.2. Border Width
You can specify a width for a border by using the Border-width property.
There are two ways to specify a width for a border: You can specify a length value, such as 2px or 0.1em, or use 3 keywordsone of them are thin, medium (default), and thick, respectively.
Note: CSS does not define a specific width of 3 keywords, so a user agent may put thin, medium, andThe thick are set to equal 5px, 3px, and 2px respectively, while the other user agent is set to 3px, 2px, and1px.
1.3. Border color
The Border-color property is used to set the color of the border. The colors you can set:
Name -Specifies the names of the colors, such as "Red"
RGB-Specify RGB values, such as "RGB (255,0,0)"
Hex-Specify 16 binary values, such as "#ff0000"
You can also set the border color to "transparent".
Note: Border-color alone is not working, you must first use Border-style to set the border style.
1.4. Border-shorthand Property
The above example uses a number of properties to set the border.
you can set it in the "border" property:
Border-width
Border-style (required)
Border-color
2. CSS Padding (inner boundary)
the CSS Padding (padding) property defines the space between the element's border and the element's content.
When the Padding (padding) of an element is cleared, the "released" area is subject to the element background colorthe fill.
using the Fill property alone can change the padding around the top and bottom. The abbreviation fill attribute can also be used, once changed everything is changedchange.
3, CSS margin (margin)
the CSS margin property defines the space around the element.
margin clears the area around the element (outer border). Margin has no background color and is completely transparent
margin can be changed individually on the top, bottom, left, and right margin of the element. You can also change all properties at once.
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Metaname= "keywords"content= "css Border and boundary"/><Metaname= "description"content= "css Border and boundary"/><Metaname= "Author"content= "Xiaobei qq:2801616735"/><title>CSS borders and Borders</title></Head><Body> <ul> <Li>Border</Li> <Li>Inner boundary</Li> <Li>Outer boundary</Li> </ul> <H2>1. Border border</H2> <Pstyle= "border-color:red; border-style:dashed; border-width:1px;">Border-style<BR/>Border-color<BR/>Border-width</P> <HR/> <H2>2. Border Direction setting</H2> <Pstyle= "border-style:dashed; border-color:red green blue orange; height:50px;">border-color:red Green Blue orange; </P> <HR/> <H2>2.1. Border Direction setting</H2> <Pstyle= "border-style:dashed; border-color:red Green; height:50px;">border-color:red Green; </P> <HR/> <H2>2.2. Border Direction setting</H2> <Pstyle= "border-style:dashed; border-color:red green blue; height:50px;">border-color:red Green Blue; </P> <HR/> <H2>3. Inner boundary</H2> <Tablebgcolor= "#FF0000"Border= "0"width= "$"Height= "Max"cellpadding= "0"cellspacing= "0"> <TR><TDvalign= "Top"style= "padding-top:20px; padding-left:20px;">Inner boundary</TD></TR> </Table> <HR/> <H2>4. Outer boundary</H2> <Tablebgcolor= "#FF0000"Border= "0"width= "$"Height= "Max"cellpadding= "0"cellspacing= "0"> <TR><TDvalign= "Top"style= "margin-top:20px; margin-left:20px;">Inner boundary</TD></TR> </Table></Body></HTML>
CSS borders and Borders
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
