If you are beginner level in css and html i suggest you just copy and paste my css and html code and study the code. Its not too hard.
Hope you will enjoy it. If you like this technique just let me know i will show more excellent tricks in my next post.
Basic idea :
The basic idea of this rounded corners without image is that we style the corners using four or five pixel high strips before and after the main content div. These strips are created using styled <b></b> tags. <b> tags have been used because they are faster to type than <span></span> and take up less file space (as good a reason as any).
Each strip is created using a background color, a left and right border color and a left and right margin.
Heare is a diagram to show how each strip was organized.
The basic curved corner is comprised of four strips labelled b1 to b4 and in the example above the background color is a Orchid , the border color is white and the outer background color is light grey.
The XHTML is below:
<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Create rounded corners by css without image which support in all Browsers.</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
The css style is below:
.inset {
background:transparent;
width:40%;
}
.inset h1, .inset p {
margin:0 10px;
}
.inset h1 {
font-size:2em; color:#fff;
}
.inset p {
padding-bottom:0.5em;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
height:1px;
}
.inset .b2 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #aaa;
}
.inset .b3 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #ddd;
}
.inset .b4 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #eee;
}
.inset .b4b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #fff;
}
.inset .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #fff;
}
.inset .b2b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #fff;
}
.inset .b1 {
margin:0 5px;
background:#999;
}
.inset .b2, .inset .b2b {
margin:0 3px;
border-width:0 2px;
}
.inset .b3, .inset .b3b {
margin:0 2px;
}
.inset .b4, .inset .b4b {
height:2px; margin:0 1px;
}
.inset .b1b {
margin:0 5px;
background:#fff;
}
.inset .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
}
After applying above code the box will be shows like following image
Thats it. Take the code and customize as you want. If you have any question just ask. I will try to give you a better solution. Enjoy making rounded corners by css without image.
Hope you will enjoy it. If you like this technique just let me know i will show more excellent tricks in my next post.
Basic idea :
The basic idea of this rounded corners without image is that we style the corners using four or five pixel high strips before and after the main content div. These strips are created using styled <b></b> tags. <b> tags have been used because they are faster to type than <span></span> and take up less file space (as good a reason as any).
Each strip is created using a background color, a left and right border color and a left and right margin.
Heare is a diagram to show how each strip was organized.
The basic curved corner is comprised of four strips labelled b1 to b4 and in the example above the background color is a Orchid , the border color is white and the outer background color is light grey.
The XHTML is below:
<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Create rounded corners by css without image which support in all Browsers.</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
The css style is below:
.inset {
background:transparent;
width:40%;
}
.inset h1, .inset p {
margin:0 10px;
}
.inset h1 {
font-size:2em; color:#fff;
}
.inset p {
padding-bottom:0.5em;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
height:1px;
}
.inset .b2 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #aaa;
}
.inset .b3 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #ddd;
}
.inset .b4 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #eee;
}
.inset .b4b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #fff;
}
.inset .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #fff;
}
.inset .b2b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #fff;
}
.inset .b1 {
margin:0 5px;
background:#999;
}
.inset .b2, .inset .b2b {
margin:0 3px;
border-width:0 2px;
}
.inset .b3, .inset .b3b {
margin:0 2px;
}
.inset .b4, .inset .b4b {
height:2px; margin:0 1px;
}
.inset .b1b {
margin:0 5px;
background:#fff;
}
.inset .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
}
After applying above code the box will be shows like following image
Thats it. Take the code and customize as you want. If you have any question just ask. I will try to give you a better solution. Enjoy making rounded corners by css without image.
Wonderful post. Very helpful.
ReplyDeleteThe website designer plans for a logical flow of web pages which serve the functional aspect as well as provide aesthetic appeal to the viewer. You could definitely use the latest technology if it has a full-fledged functional value to your website design.
ReplyDeleteWhere would you place this code in blogger?
ReplyDeleteOnline Javascript Course | Backbone.JS Online Course | KnockoutJS Online Training | Angularjs Online Course | Bootstrap Online Training | Node js Online Course | Typescript Online Training
ReplyDelete