Saturday, November 19, 2022

CSS Border bottom property Web designing blog

 

    Border bottom property


Border bottom property

1. Border-bottom-style

The Border bottom style property sets the style of an elements bottom Border.

Syntax

 Rear: border-bottom-style: none hidden | dotted | dashed | solid | double groove ridge | inset | outset | initial | inherit;


Border-bottom-style Example 

<!DOCTYPE html>

 <html>

 <head>

 <style>

h1{border-bottom-style: groove; 

border-bottom-color: coral; 

 border-bottom-width: 7px;

}

div { border-style: solid; 

border-bottom-style: groove;

 border-bottom-color: coral; 

border-bottom-width: 7px; }

 </style>

</head>

 <body>

<h1>A heading with a groove bottom border</h1> 

 <div>A div element with a groove bottom border.</div>

 </body>

 </html>

Border-bottom-style output 

Border-bottom-style

2. Border-bottom-color

The border-bottom-color property sets the color of an element's bottom border. Always declare the border-style or the border-bottom-style property before the border- bottom-color property. An element must have a border before you can change the color.


Border-bottom-color Example 


<! Doctype html>

<html> 

 <head>

<style>

h1 {border-bottom-style: solid;

 border-bottom-color: pink;

} 

h2 {

border-bottom-style: solid;

 border-bottom-color: rgb(20, 176,76);} 

h3 { border-bottom-style: solid;

 border-bottom-color: hsla(89, 45%, 10%,0.5);}

h4 {

border-style: solid;

 border-bottom-color: #92a8d1;} 

</style>

 </head> 

<body>

<h1>A heading with a colored bottom border</h1>

<h2>A heading with a colored bottom border</h2>

<h3>A heading with a colored bottom border</h3>

 <h4>A heading with a colored bottom border</h4> 

 </body>

</html>

Border-bottom-color output 


Border-bottom-color



3. border-top-right-radius Property: 


The border-top-right-radius property defines the radius of the top-right corner. This property allow you to add rounded borders to elements.


Syntax:

 border-top-right-radius: length | % [length | %] | Initial | inherit;

If you set two values, the first one is for the top border, and the second one for the right border. If the second value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.


border-top-right-radius Example 


<IDOCTYPE html>
 <html>
<head>
<style>

 #border1{
border: 2px solid yellow;
 padding: 10px;
  border-top-right-radius: 25px;
}

#border2{
border: 2px solid red;
 padding: 10px;
 border-top-right-radius: 50px 20px;}

 #border3
 {

border: 2px solid red;
 padding: 10px; 
border-top-left-radius: 25px;
 border-top-right-radius: 25px; 
 border-bottom-left-radius: 25px; 
border-bottom-right-radius: 25px;}
 </style> </style></head> <body>

 <h2>border-top-right-radius: 25px: </h2> 
<div id="border1"> 
<p>The border-top-right-radius property defines the radius of the top-right corner. </p></div>

<h2>border-top-right-radius: 50px 20px:</h2> <div id="border2"> 
<p>If two values are set; the first one is for the top border, the second one for the right border,</p></div><br> 
 <div id="border3">third division </div>

 </body> </html>


border-top-right-radius Output



Border top right radius property


Referance link

html patterns attributes

frame tag html

difference between world wide web
on

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)