BORDER PROPERTIESCSS Border properties:The CSS border is a shorthand property used to set the border on an element. The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below
The Border style property is used to specify the border type which you want to display on the web page. There are some border style values which are used with border-style property to define a border. Value Description ------- ------------------------------------------------------------------------------------- none It doesn't define any border. dotted It is used to define a dotted border. dashed It is used to define a dashed border. solid It is used to define a solid border. double It defines two borders wIth the same border-width value. groove It defines a 3d grooved border. effect is generated according to border-color value. ridge It defines a 3d ridged border. effect is generated according to border-color value. inset It defines a 3d inset border. effect is generated according to border-color value. outset It defines a 3d outset border. effect is generated according to border-color value. Eg: < !DOCTYPE html > < html > < head > < style > p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} < /style > < /head > < body > < p class="none">No border.< /p > < p class="dotted">A dotted border.< /p > < p class="dashed">A dashed border.< /p > < p class="solid">A solid border.< /p > < p class="double">A double border.< /p > < p class="groove">A groove border.< /p > < p class="ridge">A ridge border.< /p > < p class="inset">An inset border.< /p > < p class="outset">An outset border.< /p > < p class="hidden">A hidden border.< /p > < /body> < /html >Output : No border. A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. An outset border. 2. CSS border-width The border-width property is used to set the border's width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border. < !DOCTYPE html > < html > < head > < style > p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: solid; border-width: 1px; } < /style > < /head > < body > < p class="one">Write your text here.< /p > < p class="two">Write your text here.< /p > < p class="three">Write your text here.< /p > < /body > < /html >Output : Write your text here. Write your text here. Write your text here. 3. CSS border-color There are three methods to set the color of the border.
< !DOCTYPE html > < html > < head > < style > p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: #98bf21; } < /style > < /head > < body > < p class="one">This is a solid red border< /p > < p class="two">This is a solid green border< /p > < /body > < /html >Output : This is a solid red border This is a solid green border 4. CSS border-radius property This CSS property sets the rounded borders and provides the rounded corners around an element, tags, or div. It defines the radius of the corners of an element. It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.This CSS property includes the properties that are tabulated as follows: Property Description ------------------------ ------------------------------------------------------------------- border-top-left-radius It is used to set the border-radius for the top-left corner border-top-right-radius It is used to set the border-radius for the top-right corner border-bottom-right-radius It is used to set the border-radius for the bottom-right corner border-bottom-left-radius It is used to set the border-radius for the bottom-left corner Eg: For Border Radius < !DOCTYPE html > < html > < head > < title> CSS border-radius < /title> < style> div { padding: 50px; margin: 20px; border: 6px ridge red; width: 300px; float: left; height: 150px; } p{ font-size: 25px; } #one { border-radius: 90px; background: lightgreen; } #two { border-radius: 25% 10%; background: orange; } #three { border-radius: 35px 10em 10%; background: cyan; } #four { border-radius: 50px 50% 50cm 50em; background: lightblue; } < /style> < /head> < body> < div id = "one"> < h2> Welcome to the TesDBAcademy < /h2> < p> border-radius: 90px; < /p> < /div> < div id = "two"> < h2> Welcome to the TesDBAcademy < /h2> < p> border-radius: 25% 10%; < /p> < /div> < div id = "three"> < h2> Welcome to the TesDBAcademy < /h2> < p> border-radius: 35px 10em 10%; < /p> < /div> < div id = "four"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-radius: 50px 50% 50cm 50em;< /p> < /div> < /body> < /html> Eg: border-top-left-radius < !DOCTYPE html> < html> < head> < title> CSS border-radius < /title> < style> #left { border-top-left-radius: 250px; background: lightgreen; padding: 50px; border: 6px ridge red; width: 300px; height: 200px; font-size: 25px; } < /style> < /head> < body> < center> < div id = "left"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-top-left-radius: 250px;< /p> < /div> < /center> < /body> < /html> Eg: border-top-right-radius < !DOCTYPE html> < html> < head> < style> #left { border-top-right-radius: 50%; background: lightgreen; padding: 50px; border: 6px ridge red; width: 300px; height: 200px; font-size: 25px; } < /style> < /head> < body> < center> < div id = "left"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-top-right-radius: 50%;< /p> < /div> < /center> < /body> < /html> Eg: border-bottom-right-radius < !DOCTYPE html> < html> < head> < style> #left { border-bottom-right-radius: 50%; background: lightgreen; padding: 50px; border: 6px ridge red; width: 300px; height: 200px; font-size: 25px; } < /style> < /head> < body> < center> < div id = "left"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-bottom-right-radius: 50%;< /p> < /div> < /center> < /body> < /html> Eg: border-bottom-left-radius < !DOCTYPE html> < html> < head> < style> #left { border-bottom-left-radius: 50%; background: lightgreen; padding: 50px; border: 6px ridge red; width: 300px; height: 200px; font-size: 25px; } < /style> < /head> < body> < center> < div id = "left"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-bottom-left-radius: 50%;< /p> < /div> < /center> < /body> < /html>Using (/) symbol for horizontal and vetical We can specify separate horizontal and vertical values by using the slash (/) symbol. The values before the slash (/) is used for the horizontal radius and the values after the slash (/) are for the vertical radius. < !DOCTYPE html> < html> < head> < style> div{ padding: 50px; border: 6px ridge red; width: 300px; margin: 20px; font-weight: bold; height: 175px; float: left; font-size: 25px; } #one { border-radius: 10% / 50%; background: lightgreen; } #two { border-radius: 120px / 100px 10px; background: lightblue; } #three { border-radius: 50% 10em / 10% 20em; background: lightpink; } #four { border-radius: 100px 10em 120px / 30%; background: cyan; } < /style> < /head> < body> < center> < div id = "one"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-radius: 10% / 50%; < /p> < /div> < div id = "two"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-radius: 120px / 100px 10px;< /p> < /div> < div id = "three"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-radius: 50% 10em / 10% 20em; < /p> < /div> < div id = "four"> < h2>Welcome to the TesDBAcademy< /h2> < p>border-radius: 100px 10em 120px / 30%; < /p> < /div> < /center> < /body> < /html> CSS border-spacing properties This CSS property is used to set the distance between the borders of the adjacent cells in the table. It applies only when the border-collapse property is set to separate. There will not be any space between the borders if the border-collapse is set to collapse. It can be defined as one or two values for determining the vertical and horizontal spacing.
border-spacing: length | initial | inherit;Property Values : The values of this CSS property are defined as follows. < !DOCTYPE html> < html> < head> < title> border-spacing property < /title> < style> table{ border: 2px solid blue; text-align: center; font-size: 25px; background-color: lightblue; } th{ border: 3px solid red; background-color: yellow; } td{ border: 3px solid violet; background-color: lightgreen; } #space{ border-collapse: separate; border-spacing: 30px; } < /style> < /head> < body> < h1> The border-spacing Property < /h1> < h2> border-spacing: 30px; < /h2> < table id = "space"> < tr> < th> First_Name < /th> < th> Last_Name < /th> < th> Marks < /th> < /tr> < tr> < td> HTML < /td> < td> Hyper Text MarkUp Language< /td> < td> 95 < /td> < /tr> < tr> < td> CSS< /td> < td> Cascading Style Sheet< /td> < td> 87 < /td> < /tr> < tr> < td> JS< /td> < td> Javascript< /td> < td> 98 < /td> < /tr> < /table> < /body> < /html>Output : ![]() border-radius : It is used to make the rounded corners of the button. It sets the border radius of the button. Syntax element { // border-radius property }Eg: < !DOCTYPE html> < html> < head> < title>button background Color< /title> < style> body{ text-align: center; } button { color:black; font-size: 15px; } .b1 { background-color: red; border:none; } .b2 { background-color: blue; border:5px brown solid; border-radius: 5px; } .b3{ background-color:orange; border: 5px red dashed; border-radius: 10px; } .b4{ background-color: gray; border: 5px black dotted; border-radius: 20px; } .b5{ background-color: lightblue; border:5px blue double; border-radius: 30px; } < /style> < /head> < body> < h1>The border-radius property< /h1> < h2>Below there is the border name and border-radius< /h2> < button class="b1">none< /button> < button class="b2">solid 5px< /button> < button class="b3">dashed 10px< /button> < button class="b4">dotted 20px< /button> < button class="b5">double 30px< /button> < /body> < /html>Output : The border-radius propertyBelow there is the border name and border-radius« Previous Next Topic » (CSS - Display Properties) |