The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border. p {border-top: 1px solid red} p {border-right: 2px solid blue} p {border-bottom: 1px solid red} p {border-top: 2px solid black} h1 {border: 1px solid black}
Setting the Box Width The width of an element is applied to the content area. Other measurements such as padding, border and margins are added to this width. For example, if an element is specified with width: 200px; the content area is 200px wide. If padding, boder, or margin are applied to the same element, their measurements are added to the overall width Read More...
Border properties can be converted to the shorthand border property. The <h1> element can be styled with border-width, border-style. and border-color or with a single border property. Longhand Properties h1, h2 { text-align: center; color: navy; } h1 { border-width: 1px; border-style: solid; border-color: gray; } h2{ font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; } p { color: maroon; font: 80% arial, helvetica, sans-serif; } Shorthand Border h1, h2 { text-align: center; color: navy; } h1 { border: 1px solid gray; } h2{ font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; } p { color: maroon; font: 80% arial, helvetica, sans-serif; }
Home