FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 834

CSS3 Border Property


2021-11-16 18:14 · 7 min read

CSS3 border property allows us to specify the style, width, and color property of an HTML element's border.
 

Border Property

If we want to change the style of the border of an HTML element we can use CSS3 Border Property.

 

Example

{border-style :  solid;}                 

property         value 
 

Other Values

  • dotted - Used to define dotted border
  • solid - Used to define solid border
  • dashed - Used to define dashed border
  • double - Used to define double border
  • outset - Used to define 3D outset border.
  • groove - Used to define 3D grooved border.
  • ridge - Used to define 3D ridged border.
  • inset - Used to define 3D inset border.
  • none - Used to define no border
  • hidden - Used to define the hidden border

 

<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{
background-color:white;
padding:10px 35px;
border-style:dotted;
border-radius:5px}
</style>
</head>

<!--Body-->
<body>
<button type="submit" class="tdb-school">
button border properties
</button>
</body>
</html>

 

Border Radius Property

Border radius property is used to set the curve shape (rounded corners) while applying on HTML elements.

 

Syntax

{border-radius: 10px;}                property        value 
 

  • We can use length units px, %, em, etc. as the value of border-radius. The value 10px sets the all corner to 10px (curve shape). If we want to set different values for a different corner then we can use these properties (given below).

Properties

  • border-top-left-radius - Used to set top left corner value
  • border-top-right-radius - Used to set top left corner value
  • border-bottom-right-radius - Used to set top left corner value
  • border-bottom-left-radius - Used to set top left corner value

Border radius shorthand property

  • border-radius: 20% 80% 20% 80%
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{
border-radius:20% 80% 20% 80%;
padding:50px;
width:100px;
color:white;
text-align:center;
background:linear-gradient(130deg,black,red);
}
</style>
</head>

<!--Body-->
<body>
<div class="tdb-school">
border-radius
</div>
</body>
</html>

 

Border Shorthand Property

If you don't want to write different CSS rules for border property then you can use border Shorthand property.

{border:  color style width}              

property      value 
 

<style>
/*order shorthans*/
.parent{
border: color style width;
}
</style>
<!DOCTYPE html>
<html>
<!--Body-->
<body>
<button type="submit" class="tdb-school"
style="border:black double 5px;padding:10px 35px;">
button border properties
</button>
</body>
</html>

 

Border Image Property

If you want to set the border image on an HTML element's border, you can use border-image property.{border-image  :  

url(js.png) 25 round}                    

property             value 

 

<style>
/*order shorthans*/
.parent{
border-image: url(js.png) 20 round;
}
</style>
<style>
/*order shorthans*/
.tdb-image{
border-image: url(js.png) 20 round;
padding:25px;
}
</style>
<body>
<button class="tdb-image" type="submit"
class="tdb-school">
border-image properties
</button>
</body>

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer