CSS- text with rounded corners
In this part we will have a look through how to display text with rounded corners.
Following is an example of the text with rounded corners using CSS property:
For safari, chrome, etc:
-webkit-border-top-left-radius: 50px;
For mozilla:
-moz-border-radius-topleft: 50px;
For Opera:
border-radius: 50px;
For old Konqueror browsers:
-khtml-border-radius: 50px;
Code:
<!doctype html>
<html>
<head>
<title>HTML5 text with rounded corners</title>
<!–************** CSS ****************–>
<style type=”text/css”>
.a {
width: 200px;
height: 100px;
background: #605F5F;
margin: 20px;
position: relative;
-moz-border-radius-topleft: 50px;<!– For mozilla–><!– top-left corner–>
-webkit-border-top-left-radius: 50px; <!– For safari, chrome–>
border-radius:50px;<!– For Opera–>
-khtml-border-radius: 50px;<!– For old Konqueror browsers–>
}
.b {
width: 200px;
height: 100px;
background: #605F5F;
margin: 20px;
position: relative;
-moz-border-radius-topright: 50px;<!– For mozilla–><!– top-right corner–>
-webkit-border-top-right-radius: 50px; <!– For safari, chrome–>
border-radius:50px;<!– For Opera–>
-khtml-border-radius: 50px;<!– For old Konqueror browsers–>
}
.c {
width: 200px;
height: 100px;
background: #605F5F;
margin: 20px;
position: relative;
-moz-border-radius-bottomleft: 50px;<!– For mozilla–><!– bottom-left corner–>
-webkit-border-bottom-left-radius: 50px; <!– For safari, chrome–>
border-radius:50px;<!– For Opera–>
-khtml-border-radius: 50px;<!– For old Konqueror browsers–>
}
.d {
width: 200px;
height: 100px;
background: #605F5F;
margin: 20px;
position: relative;
-moz-border-radius-bottomright: 50px;<!– For mozilla–><!– bottom-right corner–>
-webkit-border-bottom-right-radius: 50px; <!– For safari, chrome–>
border-radius:50px;<!– For Opera–>
-khtml-border-radius: 50px;<!– For old Konqueror browsers–>
}
p {
display: block;
margin: 0px;
padding: 15px;
color: #FFF;
font: bold 20px/20px Arial;
}
</style>
</head>
<body>
<div class=”a”> <p>This is some text that goes inside the box</p></div>
<div class=”b”> <p>This is some text that goes inside the box</p></div>
<div class=”c”> <p>This is some text that goes inside the box</p></div>
<div class=”d”> <p>This is some text that goes inside the box</p></div>
</body;
</html>
You may also like
HTML 5 APIs explained
PHP – AJAX