How to Create CSS3 Borders – CSS3 Handy Techniques

Author: | Posted in CSS3 Techniques 8 Comments

How to Create CSS3 Borders - CSS3 Handy Techniques

In this helping and creative technique based article where we are using CSS3 (Cascading Style Sheets), these are useful methods which we can use in website development, in this modern web development era we should get control on these kind of advanced development tricks.

I think this is not last end of sharing basic tips and tricks of css3, we’re preparing more tricky posts for you near future, please share your user experience for motivation.

1. Rounded Corners by CSS3

1. Rounded Corners by CSS3

we’re adding “rounded corners” with easy way and hopefully this is another CSS3 technique can more helpful to you in front-end development.

[sourcecode language=”plain”]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>HTML5 and CSS3 Combinations</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
#rounded-corners {
margin: 50px auto;
width:500px;
color:#fff;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
border:2px solid;
border-radius:25px; -moz-border-radius:25px;
}
</style>

</head>

<body>

<div id=”rounded-corners”>Rounded Corners by CSS3</div>

</body>
</html>[/sourcecode]

2. Rectangle Shadow by CSS3

2. Rectangle Shadow by CSS3

I know you enjoying this beautiful article to learn about CSS3, in this technique we have to share “rectangle shadow effect” with little code.

[sourcecode language=”plain”]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>HTML5 and CSS3 Combinations</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
#rectangle-shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>

</head>

<body>

<div id=”rectangle-shadow”>Rectangle Shadow by CSS3</div>

</body>
</html>
[/sourcecode]

3. Borders with Image by CSS3

3. Rounded Corners by CSS3

In this area we using border image property using CSS3, we also sharing an image below which we’re using in this above border effect:

border image

[sourcecode language=”plain”]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>HTML5 and CSS3 Combinations</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
#border-image {
border-image:url(border.png) 30 30 round; -moz-border-image:url(image-border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
width:500px;
padding:5px;
text-align:center;
font-size:20px;
margin:40px auto;
color:#21759b;
}
</style>

</head>

<body>

<div id=”border-image”>Borders with Image by CSS3</div>

</body>
</html>
[/sourcecode]

Comments
  1. Posted by Abhi Balani (OddBlogger)
  2. Posted by wpmaster
  3. Posted by Marco
  4. Posted by Web yazilim
  5. Posted by LarryO'Brien
  6. Posted by JLS Alex
  7. Posted by Valvaithenral
  8. Posted by Rangga

Add Your Comment