asp.net.ph

Skip Navigation LinksHome > Abakada: Back to Basics > Language References > CSS Properties > Box Properties

CSS Box Properties


The CSS box model defines how the different parts of a box ~ margin, border, padding, and content ~ work together to create a box that is rendered on a page.

PropertyDescription
borderShorthand notation for setting all border properties in a single declaration.
border-bottomShorthand notation for setting border bottom properties in a single declaration.
border-bottom-colorSets the color of an element’s bottom border.
border-bottom-left-radiusRounds the bottom-left corner of an element.
border-bottom-right-radiusRounds the bottom-right corner of an element.
border-bottom-styleSets the line style of an element’s bottom border.
border-bottom-widthSets the width of an element’s bottom border.
border-colorShorthand notation for setting all border colors in a single declaration.
border-imageDraws an image around a given element.
border-image-outsetSets the distance by which an element’s border image is set out from its border box.
border-image-repeatDefines how images for the sides and the middle part of the border image are scaled and tiled.
border-image-sliceDivides the image specified by border-image-source into regions.
border-image-sourceSets the source image used to create an element’s border image.
border-image-widthSets the width of an element’s border image.
border-leftSets all the properties of an element’s left border in a single declaration.
border-left-colorSets the color of an element’s left border.
border-left-styleSets the style of an element’s left border.
border-left-widthSets the width of an element’s left border.
border-radiusRounds the corners of an element’s outer border edge.
border-rightSets all the properties of an element’s right border in a single declaration.
border-right-colorSets the color of an element’s right border.
border-right-styleSets the style of an element’s right border.
border-right-widthSets the width of an element’s right border.
border-styleSets the style of an element’s top border.
border-topSets all the properties of an element’s top border in a single declaration.
border-top-colorSets the color of an element’s top border.
border-top-left-radiusRounds the top-left corner of an element.
border-top-right-radiusRounds the top-right corner of an element.
border-top-styleSets the style of an element’s top border.
border-top-widthSets the width of an element’s top border.
border-widthSets the width for all sides of an element’s border in a single declaration.
box-shadowAdds shadow effects around an element’s frame.
marginSets the margin area on all four sides of an element in a single declaration.
margin-blockDefines the logical block start and end margins of an element, depending on the element’s writing mode, directionality, and text orientation.
margin-block-endDefines the logical block end margin of an element, depending on the element’s writing mode, directionality, and text orientation.
margin-block-startDefines the logical block start margin of an element, depending on the element’s writing mode, directionality, and text orientation.
margin-bottomSets the margin area on the bottom of an element.
margin-inlineDefines the logical inline start and end margins of an element, depending on the element’s writing mode, directionality, and text orientation.
margin-inline-endDefines the logical inline end margin of an element, depending on the element’s writing mode, directionality, and text orientation.
margin-inline-startDefines the logical inline start margin of an element, depending on the element’s writing mode, directionality, and text orientation.
margin-leftSets the margin area on the left side of an element.
margin-rightSets the margin area on the right side of an element.
margin-topSets the margin area on the top of an element.
paddingSets the padding area on all four sides of an element in a single declaration.
padding-blockDefines the logical block start and end padding of an element, depending on the element’s writing mode, directionality, and text orientation.
padding-block-endDefines the logical block end padding of an element, depending on the element’s writing mode, directionality, and text orientation.
padding-block-startDefines the logical block start padding of an element, depending on the element’s writing mode, directionality, and text orientation.
padding-bottomSets the height of the padding area on the bottom of an element.
padding-inlineDefines the logical inline start and end padding of an element, depending on the element’s writing mode, directionality, and text orientation.
padding-inline-endDefines the logical inline end padding of an element, depending on the element’s writing mode, directionality, and text orientation.
padding-inline-startDefines the logical inline start padding of an element, depending on the element’s writing mode, directionality, and text orientation.
padding-leftSets the width of the padding area on the left of an element.
padding-rightSets the width of the padding area on the right of an element.
padding-topSets the height of the padding area on the top of an element.

External reference: CSS Box Model Module Level 4

See Also

Style Sheet Basics   Using StyleSheets   W3C Cascading Style Sheet Specification



Check out related books at Amazon

© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note