Apa itu corner border? Corner border ni hasil daripada seting ukuran sudut, menggunakan px / em. Boleh guna untuk sidebar, post title, blockquote, post content dll.
Berikut sokongan browser>>
Property | border-radius:
Internet explorer: 9.0
Google Chrome: 5.0 4.0 -webkit-
Mozilla: 4.0 3.0 -moz-
Safari: 5.0 3.1 -webkit-
Opera: 10.5
Solid
Line Border:
<div style="border: 2px solid; text-align: center;">
<span style="color: red;">Solid</span>
</div>
Corner border:
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 35px;
border-radius: 35px;
CARA GUNA:
#Untuk sidebar:
- Ctrl+F, cari kod:
- Ctrl+F, cari kod:
h2 {
- paste kod:
h2 {
"code"
"code"
"code"
"code"
PASTE SINI
}
#Untuk post-title:
h2 {
"code"
"code"
"code"
"code"
PASTE SINI
}
#Untuk post-title:
- Ctrl+F, cari kod
h3.post-title, .comments h4 {
- Paste kod:
h3.post-title, .comments h4 {
"code"
"code"
"code"
"code"
PASTE SINI
}
#Untuk blockquote:
- Ctrl+F, cari kod:
.post blockquote {
- Paste kod:
.post blockquote {
"code"
"code"
"code"
"code"
PASTE SINI
}
#Untuk dalam post-content:
CARA 1: buat blockquote
CARA 2: manual coding
Rounded corners!
letak butiran berikut pada tab HTML:
<html>
<head>
<style>
#commandborderstyle SINI {
}
</style>
</head>
<body>
<p id="commandborderstyle">LETAK AYAT DI DALAM SINI</p>
</body>
</html>
Contoh: (boleh cuba copy paste kod di bawah)
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners1">Rounded corners!</p>
</body>
</html>
Terima kasih baca, sudi-sudilah komen :)
CSS3 Rounded Corners - Welookups
ReplyDelete