All geek questions in one place

How to make a round corner using pure css and html?

In a compatible and most convenient way?

+1
source share
7 answers

pure css and html? (assuming that you do not mean using images for corners or a background image ....)

some browsers support rounded borders for example.

-moz-border-radius -webkit-border-radius border-radius

However, in IE they do not work

(see Jeff's answer here and comments.)

+7
source

now rounded corners are supported in Firefox and Safari through a browser extension

the rounded corner is part of the CSS3 specification, so if you want to implement the rounded corner using pure CSS and HTML, now you can only use browser extensions (-moz-border-radius for Firefox -webkit for safari)

you can also achieve the same using javascript plugins

+1
source

I don’t remember where I found this technique, but this page contains several similar solutions:

 <html> <head> <title>hm</title> <style type="text/css" media="screen"> body{ background:#000; } .heading{ color:#1d4b76; padding-top:1em; width:10em; text-align:center; } .heading h2 { font-size:2em; padding:.2em; margin:0; background-color:#1e1e1e; } /* Rounded header */ b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #1e1e1e} b.r1{margin: 0 5 0 5px} b.r2{margin: 0 2 0 3px} b.r3{margin: 0 1 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 0 0 1px; height: 2px; background:#1e1e1e;} </style> </head> <body> <div class="heading"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <h2>Example!</h2> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div> </body> </html>

For the site I used this on, I removed the right margins to use them for the right-aligned headers ( b.r1{margin: 0 0 0 5px} , etc.):

Rounded corner example http://img81.imageshack.us/img81/1796/picture4o.png

+1
source

If the images are resolved, make 4 corners in the graphics program of your choice, make it a background image of some span / div tags and correctly align them with the position: absolute; in a container that is set to: relative ;. If you want to use only CSS, you can basically do the same, but instead of choosing a background image, each pixel should be set. In a 5 by 5 corner, you need roughly 10-12 tags for these tags. In other words, about 40 per panel, which can lead to the 1st block (1) (+1). Although I personally would not use this approach, it is possible and probably will work in most browsers.

0
source

You can use CSS3 rules:

  • -khtml-border-radius: 5px; / * for Konqueror (linux browser) * /
  • -moz-border-radius: 5px; / * for any version of Firefox * /
  • -webkit-border-radius: 5px; / * for Safari and Google Chrome * /
  • border-radius: 5px; / * for browsers that support CSS3 * /
0
source

http://kalsey.com/2003/07/rounded_corners_in_css/

Uses 4 small images, though

0
source

Hi, I recently had to overcome the same problem, a modified widget with rounded corners, an inner border, a shadow and a gradient background. It should also work on all browsers (including IE6).

Assuming you're using photoshop and looking at the source files correctly, it's pretty simple. In general, this requires 4 images (up to 7, depending on how you support IE6), all of them can be cut from the source Photoshop file, so it is quite easy.

Check out the link below.

http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow

0
source

Source: https://habr.com/ru/post/1445759/

More articles:


All Articles