CSS Tutorial for Beginners Tamil - 05 - CSS BORDER PROPERTY (With Examples)

CSS Border Property (CSS Tamil Tutorial) CSS Border Style The border-style property specifies what kind of border to display. The following values are allowed: • dotted - Defines a dotted border • dashed - Defines a dashed border • solid - Defines a solid border • double - Defines a double border • inset - Defines a 3D inset border. The effect depends on the border-color value • outset - Defines a 3D outset border. The effect depends on the border-color value • none - Defines no border CSS Border - Individual Sides From the examples on the previous pages, you have seen that it is possible to specify a different border for each side. In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left): border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; Short Method border-style: dotted solid double dashed; CSS Border Width The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick border-width: 5px; Specific Side Widths border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */ border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */ CSS Border Color The border-color property is used to set the color of the four borders. The color can be set by: • name - specify a color name, like "red" • HEX - specify a HEX value, like "#ff0000" • RGB - specify a RGB value, like "rgb(255,0,0)" border-color: red; Specific Side Colors The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */ CSS Rounded Borders The border-radius property is used to add rounded borders to an element: Example : border-radius: 5px;